JQuery onpaste事件限制用戶粘貼像|的字符，。/

Question

我想確保用戶不能粘貼帶有（。|「）的字符串我該如何防止它？我正在研究關於鍵盤的鍵，它在用戶鍵入時工作，但我如何防止粘貼？

這裏的jsfiddle Testing here

這裏是我的Java腳本

$("[name='search']").on({ 
keydown: function(e) { 
    if (e.which === 32 || e.which === 220) { 
     e.preventDefault(); 
     var v = this.value, 
      s = this.selectionStart; 
     this.value = v.substr(0, s) + '' + v.substr(s, v.length); 
    } 
    if (e.which === 55) { 
     e.preventDefault(); 
     var v = this.value, 
      s = this.selectionStart; 
     this.value = v.substr(0, s) + '7' + v.substr(s, v.length); 
    } 
}, 


// Here is the paste function but i no sure how to write it 

paste: function(e) { 
    var s = this; 
    setTimeout(function() { 
     // here i no sure how to do it 
    }); 
    } 
}); 

Answer 1

您可以使用bind如下沿setTimeout和使用正則表達式刪除字符。

$("[name='search']").on({ 
 
    keydown: function(e) { 
 
     if (e.which === 32 || e.which === 220) { 
 
      e.preventDefault(); 
 
      var v = this.value, 
 
       s = this.selectionStart; 
 
      this.value = v.substr(0, s) + '' + v.substr(s, v.length); 
 
     } 
 
     if (e.which === 55) { 
 
      e.preventDefault(); 
 
      var v = this.value, 
 
       s = this.selectionStart; 
 
      this.value = v.substr(0, s) + '7' + v.substr(s, v.length); 
 
     } 
 
    }, 
 
    
 
    paste: function(e) { 
 
     var stopPaste = function(){ 
 
      this.value = this.value.replace(/[|\s]/g, ''); 
 
     }; 
 
         
 
     setTimeout(stopPaste.bind(this), 1); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div><span>Search: </span><input type="text" name="search" size="75" /></div>

Answer 2

強制性注：看來你嘗試一些客戶端驗證。在我回答之前，我會指出，客戶端驗證不是很可靠 - 特別是涉及安全性時 - 任何知道他們在js控制檯周圍的人都可以擊敗它。有關更多信息，請參閱問題why is client-side validation not enough?。如果你想防止輸入不正確的字符，你必須在服務器端進行。

這就是說，檢查客戶端是方便的，可以節省用戶一些時間。最可靠的方法是使用test()和簡單的regular expression。然後，您可以使用帶有if條件的test以使用replace()去除違規值。

再加上你的原代碼，它看起來有點像這樣：

function check(e){ 
    var expression = new RegExp(/[\.\|]/, "g"); 
    if (expression.test(e.target.value)){ 
     e.target.value = e.target.value.replace(expression, "") 
    } 
} 

而且你甚至可以從適當的地方，功能在你的$("[name='search']").on({部分。還要注意你的表達式可以是任何正則表達式，允許你檢查任何字符或組合字符。 Regex is power。

您可以將第2-5行添加到paste上的函數中，但在Safari和Chrome中進行了測試後，似乎您最好的辦法就是在貼上或粘貼後調用check()函數模糊事件。這是因爲粘貼到輸入中並不總是觸發更改事件。 jQuery文檔中有一些關於.on()的細節，儘管試驗和錯誤也很棒。

把所有一起，我有以下幾點：

function check(e){ 
    var expression = new RegExp(/[\.\|]/, "g"); 
    if (expression.test(e.target.value)){ 
     e.target.value = e.target.value.replace(expression, "") 
    } 
} 

$("[name='search']").on({ 
    keydown: function(e) {...}, 
    paste: function(e){ 
     check(e) 
    }, 
    blur: function(e){ 
     check(e) 
    } 
}); 

希望這有助於！

---

技巧的改進：我個人對這個更多的工作，以使代碼更可靠和表現力，清理了一下，並有可能重新考慮我的一般做法。只是個開始：

1. 考慮從輸入框中拋出一個錯誤，並剝離出所有的內容，而不是僅僅取消違規字符「|」。 - 改變用戶的輸入而不用警告他們通常是一個壞的舉動。通常最好刪除一切。

2. 刪除阻止某些字符輸入的作品。再次說明：擁有JS控制檯知識的人可以在心跳中解決這個問題，並且只需通過檢查每個按鍵來增加開銷。這不是一個主要問題，但可以改進。

3. 使用switch case語句將所有檢查邏輯放到一個地方併爲所有適當的事件運行它。你必須熟悉jQuery事件監聽器，它可能不值得，但如果我正在編寫這段代碼，我會調查。