Javascript字符限制 - 無效字符暫時顯示

我正在使用JavaScript來限制各種文本輸入字段的字符作爲客戶端驗證的一種形式以及改進的可用性。我使用下面的代碼來做到這一點：Javascript字符限制 - 無效字符暫時顯示

function validNumbers(caller) { 
    var exp = /^[\d.]+/g; 
    var str = ''; 
    if (caller.value.match(exp)) { 
     str = caller.value.match(exp).toString(); 
    } else { 
     str = ''; 
    } 
    str = str.replace(/\D/g,''); 
    caller.value = str; 
}

我用onkeypress =「validNumbers（this）;」而且大多數情況下，它就像一個魅力。問題是，當我在字段中鍵入一個無效字符時，該字段的值似乎更新（從Javascript的角度來看），但字符保持不變，直到我點擊下一個鍵，此時它是即使下一個鍵也是無效的，也可以通過目視下一個鍵的值來替換。預期的效果是，當按下無效鍵時，無效值甚至不會以可視方式顯示。我該如何做到這一點？

編輯：我選擇了下面的答案，因爲它讓我走上了正軌。我確實必須確保將e.shiftKey添加到排除事件列表中，以防止出現像「！@＃$％^ & *（）_ +」這樣的字符，但這對我來說不是問題在我自己的。

來源

2011-10-19 Adam

以字符爲基礎限制字符的用戶輸入是**反**可用性功能。告訴用戶在該領域想要什麼（例如屏幕提示「僅限數字」或類似內容），然後在合理時間（例如表單提交時）進行驗證會更有幫助。讓他們擔心他們如何實現有效的價值。 – RobG

我將在服務器端進行驗證，但通過限制可以放置在文本字段中的字符，我可以通過節省時間來節省他們回頭查看他們的表單以尋找一個明顯的問題，我可以更多地輕鬆照顧他們。如果我只是讓他們輸入他們想要的任何東西，他們就不會立即得到有關什麼有效和什麼不起作用的反饋，這可能意味着要在所有文本字段中搜索一個無效字符。時間問題是這個項目的最大焦點，因爲他們每天會使用這些表格數百次。 – Adam

您還有其他選擇，例如輸入無效字符時在輸入周圍放置紅色邊框。我發現在characer條目有限的情況下，我意外地輸入了一個無效字符，我按刪除刪除它，但聰明的程序員已經這樣做，所以我刪除了一個有效的字符。我如何找到該錯誤？另外，你如何停止粘貼或拖放無效字符？ – RobG

在您的函數中，您將在輸入到文本字段並進行評估之後清除該值。相反，你需要防止它被完全輸入到文本字段中。要做到這一點，你要使用的keydown的preventDefault()方法：

onkeydown="function(e) { validNumbers(e); }" 

function validNumbers(e) { 
    if (e.keyCode == 1 || e.keyCode == 2 ... etc) { 
     e.preventDefault(); 
    } 
}

這將從以往任何時候都進入輸入字段阻止特定的字符（reference here）。請注意，這不會阻止複製和粘貼，因此您仍然需要評估整個字符串'onpaste'，或者使用類似的事件處理程序阻止'onpaste'。

這也不是一個交叉瀏覽器的解決方案，但應該讓你的腳足夠溼。看到這個JSFiddle作爲一個生動的例子。

來源

2011-10-19 04:59:22 skyline3000

我敢肯定你可以改變：''function（e）{validNumbers（e）;}「''''validNumbers」' – qwertymk

Javascript字符限制 - 無效字符暫時顯示

回答

相關問題