Javascript onpaste replaceAll

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Javascript onpaste replaceAll相关的知识,希望对你有一定的参考价值。

我想粘贴在一个textBox中,粘贴之后,它应该用逗号替换所有空格。

<!DOCTYPE html>
<html>
<body>

<input id="pc" type="text" contenteditable="true" onpaste="myFunction()" size="60" >


<script>
function myFunction() {
 var e=document.getElementById("pc"); 
 setTimeout(function(){alert(e.value);}, 45);
 var x = document.getElementById("pc").value;
 alert(x);
 var s = x.replaceAll(" ",",");
 alert(s);

 document.getElementById("pc").value = s;
}
</script>
</body>
</html>

我的第一个警告打印空白。第二次警报(警报(x))也是空白。第三个警报(警报)打印我正在尝试粘贴的文本。

我希望第三个警报打印替换的文本,该值将覆盖文本框中的粘贴值。

答案

这个答案使用Jquery:

您可以先绑定到文本输入中的paste事件,然后将粘贴事件的结果捕获到变量中。然后,要用逗号替换空格,您只需要一个非常基本的正则表达式:data.replace(new RegExp(' ', 'g'), ','),它用逗号替换每个空格。

$('#pc').bind('paste', function(e) {
    var data = e.originalEvent.clipboardData.getData('Text');
    data = data.replace(new RegExp(' ', 'g'), ',');
    alert(data);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<body>

  <input id="pc" type="text" contenteditable="true"size="60">


</body>

</html>
另一答案

第一个警报位于不同的范围内,因此e.value未定义,因为e在其当前范围内未定义。第二个警报是空白的,因为事件是在粘贴时触发而不是粘贴后粘贴,因此onpaste值不会更新,因此在粘贴之前会给出之前的值。第三个粘贴直接修改该值,因此使用新值。如果您希望其他两个警报正常工作,您可能想尝试检查Ctrl + V的keyup事件。

<input id="pc">
<script>
window.onload = function() {
    document.getElementById('pc').onkeyup = function(e) {
        this.value = this.value.replace(/ /g,',');
    }
}
</script>

以上是关于Javascript onpaste replaceAll的主要内容,如果未能解决你的问题,请参考以下文章

将onpaste事件添加到dijit / Editor

js控制文本框只能输入中文英文数字与指定特殊符号

React onPaste 获取粘贴板的值

javascript/jQuery 如何获得鼠标右键黏贴在input中的值并用alert弹窗显示出来

只让输入数字字母中文的输入框

JavaScript最经典的55个技巧