Question

我正在使用一个函数来使用onkeyup事件清理字符串。以下代码可以正常工作：

<input type="text" id="username"  maxlength="15" onkeyup="this.value=sanitize(this.value)">

<script language="javascript" type="text/javascript">
    function sanitize(str) {
        return str.split(/[^a-z0-9._-]/g).join('');
   }
</script>

我想知道如何使用jquery重写相同的代码。由于某种原因，以下代码不会触发onkeyup事件：

<input type="text" id="username"  maxlength="15">

<script language="javascript" type="text/javascript">
$(document).ready(function () {
        $("#username").keyup(function(){
        return $("#username").val().split(/[^a-z0-9._-]/g).join(''); //--> this line is not working
    }); 
});

提前致谢！

Answer 1

您可以使用val()设置值。此外，不需要split()然后join()，请使用replace()。

$("#username").val(function(i, value) {
    return value.replace(/[^a-z0-9._-]/g, '');
});

＆＃13;

$("#username").keyup(function() {
  $(this).val(function(i, value) {
    return value.replace(/[^a-z0-9._-]/g, '');
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="username" maxlength="15" />

＆＃13;

我还建议在pattern上使用input属性。

<input type="text" id="username" maxlength="15" pattern="[a-z0-9._-]{0,15}" />
<!--                                            ^^^^^^^^^^^^^^^^^^^^^^^^^^^ -->

Answer 2

您没有再次设置值

$(document).ready(function () {
        $("#username").keyup(function(){
        var _val =  $(this).val().split(/[^a-z0-9._-]/g).join(''); 
        $(this).val(_val); // to set the value of input feild.
    }); 
});

Jquery：拆分/加入字符串onKeyup事件

2 个答案: