僅接受在JavaScript中不起作用的數字和字母代碼

Question

我試圖阻止用戶輸入除數字和字母以外的任何內容，但是我的代碼甚至不允許它們本身輸入。 可能是什么原因？ 這是我的代碼段：

$(document).ready(function(){
    $("#txtuname").keypress(function(e){ 
        var validExp = /^[0-9a-z]+$/gi;
        var val = $(this).val();
        if(val.match(validExp))
        {
            $("#errmsg").html("");
            return true;
        }
        else
        {
            $("#errmsg").html("Number and letters Only"); 
            return false;
        }
    });
});


<input type="text" name="txtuname" id="txtuname" />
<span id="errmsg"></span>

JSFiddle

Answer 1

您可以使用keyup而不是keypress

 $(document).ready(function(){ $("#txtuname").keyup(function(e){ var validExp = /^[0-9a-z]+$/gi; var val = $(this).val(); if(val.match(validExp)) { $("#errmsg").html(""); return true; } else { $("#errmsg").html("Number and letters Only"); return false; } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <input type="text" name="txtuname" id="txtuname" /> <span id="errmsg"></span> 

Answer 2

您可以用input事件代替keypress事件。 將RegExp調整為/[0-9a-z]/i ，將.split()與參數"" ， Array.prototype.every()和RegExp.prototype.test()以檢查條件if為輸入值的每個字符； 如果每個字符是數字或字母的條件是true ，否則false替換的無效字符value使用.replace()與RegExp /[^0-9a-z]/ig

 $(document).ready(function() { var validExp = /[0-9a-z]/i; $("#txtuname").on("input", function(e) { var val = this.value; var check = val.split("").every(function(value) { return validExp.test(value) }); if (check) { $("#errmsg").html(""); return check; } else { this.value = val.replace(/[^0-9a-z]/ig, ""); $("#errmsg").html("Number and letters Only"); return false; } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <input type="text" name="txtuname" id="txtuname" /> <span id="errmsg"></span> 

Answer 3

$(document).ready(function () {

        $("#txtuname").keypress(function (e) {

            var validExp = /^[0-9a-z]+$/gi;

            if (validExp.test(e.key)) {
                $("#errmsg").html("");
                return true;
            }
            else {
                $("#errmsg").html("Number and letters Only");

                return false;
            }
        });
    });

Answer 4

這是因為在將新字符添加到元素的值之前觸發了keypress事件（因此，在添加第一個字符之前，將觸發第一個keypress事件，而該值仍為空）。 您應該改用keyup，它是在添加角色reference后觸發的。

下面是代碼

html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 

<input type="text" name="txtuname" id="txtuname" />
<span id="errmsg"></span>

js

$(document).ready(function(){
    $("#txtuname").keyup(function(e){ 
        var validExp = /^[0-9a-z]+$/gi;
        var val = $(this).val();
        if(val.match(validExp))
        {
            $("#errmsg").html("");
            return true;
        }
        else
        {
            $("#errmsg").html("Number and letters Only"); 
            return false;
        }
    });
});

Answer 5

您的問題是您沒有獲得所按下鍵的值。 如果像這樣設置val變量，它將按預期工作。

var val = String.fromCharCode(e.keyCode)

這將獲得按下鍵的ASCII碼，然后轉換為它代表的字母或數字。 然后，您可以檢查您的正則表達式。

Answer 6

 $(document).ready(function(){ $("#txtuname").keyup(function(e){ var validExp = /^[0-9a-z]+$/gi; var val = $(this).val(); if(validExp.test(val)) { $("#errmsg").html(""); return true; } else { // fix the value of input field here $(this).val(""); $("#errmsg").html("Number and letters Only"); return false; } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" name="txtuname" id="txtuname" /> <span id="errmsg"></span> 

1. 如果要使用此給定的技術，則需要使用keyup，以便字符已經“添加”到該值。

2. 由於String.prototype.match實際上返回匹配項的數組，因此它無法以您希望的方式工作。 更不用說它比RegEx.prototype.test昂貴得多。

獎金

您可以使用在文本輸入字段中的獲取光標位置（以字符為單位）中顯示的輸入字段中查找carret位置的技術

實際將輸入字段固定在鍵盤上。