Table Paster

一个表格粘贴到表单的 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');
        }
    }
});

——打个小赏 感谢支持——

1 自动识别支付宝/微信/QQ支付