input onpaste事件

最新推荐文章于 2024-07-24 15:08:13 发布

最新推荐文章于 2024-07-24 15:08:13 发布 · 2.4k 阅读

文章标签：

#java #javascript #ViewUI

javascript 专栏收录该内容

161 篇文章

订阅专栏

本文介绍了解决浏览器输入框粘贴时无法保留换行符的问题，提供了两种方法：一是使用textarea代替input；二是通过JavaScript操作剪贴板数据。

function afterPaste() {
    var clipData = clipboardData;
    var text = clipData.getData('text'); //剪贴板数据 
    var reg = /\s/g;
    var ntxt = text.replace(reg, "");
    var that = this;
    //this.value = ntxt; 这种方式不行 必须setTimeout（） 
    setTimeout(function() {
        document.querySelector("#temp").value = ntxt
    },
    1);
}



function beforePaste() {
    var clipData = clipboardData;
    var text = clipData.getData('text'); //剪贴板数据     
    var reg = /\s/g;
    var ntxt = text.replace(reg, "");
    clipData.setData("text", ntxt);
}

页面中input是不能粘贴进去换行符的的例如（ff，chrome会自动替换换行符，所以如果是chrome或者ff的话就不需要此方法了）

####

123123123
撒的发生的发斯蒂芬
阿萨德发斯蒂芬

###

粘贴到input时只能留下123123123。

解决的办法有两种

1.将input换成textarea，缺点textarea不能提交到后台（原生）

2.自己写js将clipboardData中的数据处理后在赋给input。这里有两个方法可以处理

2.1 onpaste （可以叫onafterpaste）如果在这里边处理的话要用setTimeout（），不太优雅。

2.2 onbeforepaste 这里边可以将剪贴板的值处理后再放回剪贴板，然后粘贴到input时就是正确的数据了(推荐)，

既然有第二种方法了为什么还要第一种方法呢，这是因为onbeforepaste方法只有ie浏览器支持，chrome，ff只有onpaste方法。如果为了兼容的话就只能用不优雅的地一种方法了。
*/