如何防止特殊字符复制粘贴在数字字段上

Question

我只想在"数字字段"中复制粘贴数字。如果我不阻止复制粘贴，我可以复制数字字段中的'e','+','-'和'.'。在数字字段中，我可以键入这些字符，这样我就使用了另一个脚本。我只想键入和复制粘贴数字。

请检查代码：

jQuery("#otp_number").bind("cut copy paste", function(e) {
e.preventDefault(); //prevent the default behaviour 
});
document.querySelector("#otp_number").addEventListener("keypress", function(evt) {
if (evt.which != 8 && evt.which != 0 && evt.which < 48 || evt.which > 57) {
evt.preventDefault();
}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
OTP: <input type="number" id="otp_number" data-ignorepaste="" />

Answer 1

jQuery("#otp_number").on("paste", function(e) {
if (e.originalEvent.clipboardData.getData('text').match(/[^d]/))
e.preventDefault(); //prevent the default behaviour 
})
.on("keypress", function(e) {
if (e.keyCode != 8 && e.keyCode != 0 && e.keyCode < 48 || e.keyCode > 57) 
e.preventDefault();
});

您不需要限制复制或剪切操作。对粘贴事件应用测试就足够了。只有在将要粘贴的剪贴板中找到非数字字符时，才会阻止该事件。

我还没有时间对此进行测试，所以，请在必要的地方尝试改进。

编辑：

我很惊讶我最初的回答得到了这么多积极的反馈。然而，这里有一个替代版本，我认为它更宽容，更用户友好。它允许一开始输入任何可能的字符(每次输入或粘贴(，然后删除所有非数字字符：

jQuery("#otp_number").on("paste keyup",function(e){
$(this).val(this.value.replace(/[^d]/g,''))  
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="other" placeholder="anything"><br>
<input type="text" id="otp_number" placeholder="numbers only">

Answer 2

您想要的是在剪贴板的内容添加到您的输入之前访问它。

要做到这一点，您通常会查看沿着ClipboardEvent.clipboardData属性传递的DataTransfer对象
但是所有的浏览器都不支持这一点，所以你还必须处理特殊的IE情况，它会在全局Window对象上公开它。

注意，我不得不修改你的onkeypress处理程序，这样它就不会阻止ctrl+v组合，但无论如何，IMO这个函数可能会从完全重构中受益。。。

jQuery("#otp_number").on("paste", function(e) {
var dT = e.originalEvent.clipboardData || window.clipboardData;
var text = dT.getData('text');
if(parseInt(text) !== +text) { // allow only Ints
e.preventDefault(); //prevent the default behaviour 
}
});
// that one would probably need some refactoring...
document.querySelector("#otp_number").addEventListener("keypress", function(evt) {
if(!evt.ctrlKey && !evt.metaKey && // don't block ctrl + v
evt.which != 8 && evt.which != 0 && (evt.which < 48 || evt.which > 57)) {
evt.preventDefault();
}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
OTP: <input type="number" id="otp_number" data-ignorepaste="" />