javascript - Jquery:拆分/连接字符串 onKeyup 事件

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, '');
});

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

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

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

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