javascript - 如果多于 x 个字符则屏蔽

Question

我正在使用一个屏蔽插件 ( http://digitalbush.com/projects/masked-input-plugin/ ) 它可以工作，但我试图让它只在文本框中有 5 个以上字符时才工作。每当我点击第 6 个字符时，它就会清除文本框并且不再接受输入。

JS:

  <script>
  function convert(){
    if (l.length > 5){
        $("#q").mask('(999) 999-9999');
    }
  }
  </script>

HTML:

<form action="search.php" method="GET">
<input type="tel" class="form-control" name="q" id="q" placeholder="Phone/Order Number" onkeyup="convert()"><br>
<button type="submit" class="btn btn-default">Search</button>
</form>

如果有人可以帮助我，那就太好了。 :D

Answer 1

它会清除文本框，因为当您应用 mask 时，插件会清除输入。您可以通过传递 autoclear 选项并将其设置为 false 来解决这个问题。它还会不断尝试应用掩码，因此您必须删除事件监听器。所以放弃内联事件处理程序，无论如何，这都是执行事件处理程序的糟糕方法:-)

像这样的东西会起作用:

$('#q').on('keyup', function() {
    var $el = $(this);
    var val = $el.val();
    if (val.length > 5){
        $el.mask('(999) 999-9999', {
            autoclear: false,
            placeholder: ''
        });
    }
});

请注意，我还将 placeholder 设置为空字符串，否则在应用 mask 时，光标将设置到 mask 占位符的末尾，您必须将插入符号移回几个空格。