Javascript onpaste replaceAll答案

【问题标题】：Javascript onpaste replaceAllJavascript onpaste replaceAll
【发布时间】：2018-01-08 21:12:15
【问题描述】：

我想粘贴到一个文本框中，粘贴后它应该用逗号替换所有空格。

<!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>

我的第一个警报打印为空白。第二个警报 ( alert(x)) 也是空白的。第三个警报 ( alert(s)) 打印我要粘贴的文本。

我希望第三个警报打印替换的文本，并且此值会覆盖文本框中的粘贴值。

【问题讨论】：

标签： javascript replace onpaste

【解决方案1】：

此答案使用 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>

【讨论】：

【解决方案2】：

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

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

【讨论】：