Jquery: Split/Join 字符串 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}" />
<!--                                            ^^^^^^^^^^^^^^^^^^^^^^^^^^^ -->

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: Split/Join 字符串 onKeyup 事件

Jquery: Split/Join String onKeyup Event

javascript

jquery

onkeyup