Question

我写了一个带有单个输入的表单，该表单仅以波斯语使用用户名。在用户按键时，它首次定义了角色。如果角色不是波斯语，它会阻止输入更多内容并显示错误：“将你的键盘语言改为波斯语。”效果很好。但问题是即使键盘语言在第一次显示错误时是波斯语，在第二次和第三个按键就可以了。我的问题是为什么在第一次按下第一个字母时第一次显示错误？

这是我的片段：

document.getElementById('my-text').addEventListener('keypress',function(e){
    var myText = this.value;
    if(!just_persian(myText)){
        $("#error-nwl").text("change your keybord language to persian");
		this.style.boxShadow = "0px 0px 2px 1px #E25249";
		 $("#error-nwl").css('color', '#ff6666');
        this.value = myText.substring(0, myText.length - 1);
		
    }
	else{
		$("#error-nwl").text("");
		this.style.boxShadow = "0px 0px 0px 0px";	
		}
});
function just_persian(str){
    var p =  /^[\u0600-\u06FF\uFB8A\u067E\u0686\u06AF ]+$/;
    return p.test(str);
}

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>

<body>

    <div id="error-nwl"></div>
    <form action="" method="post" name="myForm" class="newslside">
        <input type="text" placeholder="register-name" id="my-text"/><br/>
    <input class="submitnews" type="submit" value="send">
    </form>



    
</body>
</html>

感谢

Answer 1

当您使用按键事件时，第一次按某个键时<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <link href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-rtl/3.2.0-rc2/css/bootstrap-rtl.min.css" rel="stylesheet"/> <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/> <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> <div class="container"> <h3>Testing bootstrap RTL css overwrite</h3> <nav class="navbar navbar-default" role="navigation"> <div class="container-fluid">  <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#"><span class="glyphicon glyphicon-home"></span> Home</a> </div>  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li><a href="#">Welcome</a></li> <li><a href="#"><span class="glyphicon glyphicon-phone-alt"></span> Contact us</a></li> <li><a href="#">Career</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li> <form class="navbar-form" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search" /> </div> <button type="submit" class="btn btn-default">Submit</button> </form> </li> </ul> </div>  </div>  </nav> </div> <a href="#" class="btn btn-default" title="" id="rtl-button" data-direction="ltr"><span class="glyphicon glyphicon-indent-right"></span> RTL</a>为空。因此，您的this.value会返回 false 。

您可以在按键后测试整个值，即“keyup”事件，或者通过将p.test(str)传递给e.key来单独测试每个字符函数（然后，你可以使用just_persian正则表达式。）

验证特殊语言的输入框

1 个答案: