掩码如果超过x个字符(Mask if more then x characters)

掩码如果超过x个字符(Mask if more then x characters)

我正在使用一个屏蔽插件（ 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

I am using a masking plugin (http://digitalbush.com/projects/masked-input-plugin/) it works, but I am trying to get it to only work once there are 5+ characters in the textbox. Whenever I hit the 6th character, it clears out the textbox and won't accept input anymore.

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>

if someone could please help me, that would be great. :D

最满意答案

它会清除文本框，因为当您应用蒙版时，插件会清除输入。 您可以通过传递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设置为空字符串，否则当应用蒙版时，光标将设置为蒙版占位符的末尾，并且您必须将插入符号移回几个空格。

It clears out the textbox because when you apply a mask, the plugin clears the input. You can get around this by passing the autoclear option and set it to false. It would also keep attempting to apply the mask, so you'd have to remove the event listener. So ditch the inline event handler, that's a bad way to do event handlers anyway :-)

Something like this would work:

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

Note that I also set the placeholder to an empty string, otherwise when the mask is applied the cursor will be set to the end of the mask placeholder and you'd have to move the caret back a few spaces.