一个表格粘贴到表单的 Javascript 小功能,我用的非常频繁,代码很简单,但能节省大量体力劳动。兼容目前主流浏览器和主流表格软件(Number、Office、WPS),特别支持单元格包含换行的情况。实际上也支持在页面中直接复制的表格。
功能说明:
- 由于安全原因浏览器无法直接操作剪切板,但借助输入框的粘贴事件可以
- 根据需要可以支持高级的输入框,如各种下拉框或者或者多选框、单选框
- 某些表格软件会将内容自动复制为富文本,粘贴时可以自动过滤多余标签
- 这种批量粘贴的插件,我没具体研究;页面圈选表格的插件有 Collect
表单示范:
Name | Text | Number | URL |
---|---|---|---|
代码:
jQuery('table#dataTable').on('paste','input,textarea',function(e){ e.preventDefault(); var cb = window.clipboardData ? window.clipboardData : (e.originalEvent || e).clipboardData; window.console && console.log(cb.types); var txt = cb.getData('Text') || cb.getData('text/plain'); if(!/plain/.test(cb.types) && /html/.test(cb.types)){ txt = cb.getData('text/html'); txt = txt.replace(/ [^>]+>/g, '>'); txt = txt.replace(/<\/?(font|p|a|u|span|tbody|table|br|colgroup|col)>/g,''); txt = txt.replace(/<\/td><td>/g, '\t') txt = txt.replace(/<\/tr><tr>/g, '\n') txt = txt.replace(/<\/?(td|tr)>/g, ''); txt = txt.replace(/ /g, ''); } var newLine = !/\n/.test(txt) && /\r/.test(txt) ? '\r' : '\n'; var newLinex = new RegExp(newLine, 'gi'); var dataArr = txt.replace(/(\s*$)/g, '').replace(/"([^"]+)"/g,function(a){ return a.replace(newLinex,'\u2028'); }).split(newLine); var dataLen = dataArr.length;//需粘贴行数 var trLen = jQuery('table#dataTable tbody tr').length;//已有行数 var xTD = jQuery(this).parent().index();//所在列,具体根据TD同级元素数增减 var yTD = jQuery(this).parent().parent().index();//所在行 var isMultiLine = jQuery(this).is('textarea')?'\n':' ';//是否文本框 jQuery('table#dataTable .pasted').removeClass('pasted'); if( dataLen + yTD > trLen ){//复制表格超过输入区域, alert('表单可填行数不及需粘贴数据,请确认粘贴起始位置并重试。'); return; for (var iData = 0; iData - yTD < dataLen - trLen; iData++) { //如有新增行数的函数也可在此触发; } } var inputName = jQuery(this).attr('name');//列框名 var inputObj,inputVal,dataOne,tdArr,dataTD; for (var iTR = 0; iTR < dataLen; iTR++) { dataOne = dataArr[iTR]; if(inputName == 'name'){//多列合并到一列的情况 dataOne = dataOne.replace(/\t/g,' ').replace(/ +/g,' '); } tdArr = dataOne.split('\t'); for (var iTD = 0; iTD < tdArr.length; iTD++) { inputObj = jQuery('table#dataTable tbody tr:eq('+(iTR+yTD)+') td:eq('+(iTD+xTD)+')').find('input,textarea'); dataTD = tdArr[iTD]; if(/\u2028/.test(dataTD)){//包含换行 dataTD = dataTD.replace(/(\s*$)|(^")|("$)/g, '');//单元格包含换行时自动附加的双引号 dataTD = dataTD.replace(/\u2028/g, isMultiLine);//文本框还原换行 } window.console && console.log(dataTD); inputName = inputObj.attr('name');//可根据列框名,格式化数据,如操作下拉框或单选多选等 inputVal = dataTD.replace(/(^\s*)|(\s*$)|\"|\'/g,'').replace(/\t| +/g,' '); if(/number/.test(inputName)){//例如列为数字 inputVal = inputVal.replace(/ |,/g,''); } if(/url/.test(inputName)){//例如列为链接 inputVal = inputVal.replace(/\r|\n| /g, ''); if(inputVal && inputVal.indexOf('http')!=0) inputVal = 'http://' + inputVal; } inputObj.val(inputVal).addClass('pasted'); } } });