如何防止特殊字符復制粘貼在數字字段上

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="" />