问题

I am using the jQuery inputmask plugin, version: 5.0.9-beta.4.
I have a username field that should only be masked if the first 3 characters entered by the user are equal to 784, else the mask should be removed.

var inputMsk = $('#txtUsername').inputmask('999-9999-9999999-9');
inputMsk.inputmask('remove');
$('#txtUsername').on('input', function() {
    var fieldValue = $(this).val();
    if (fieldValue.startsWith('784')) {
        if ($('#txtUsername').inputmask) {
            inputMsk = $('#txtUsername').inputmask('999-9999-9999999-9');
        }
    } else {
        if ($('#txtUsername').inputmask) {
            inputMsk.inputmask('remove');
        }
    }
});

The above code generates an error in the console when I enter 784 and then remove the 4.
The error is:

Uncaught TypeError: f is not a function

The console identifies the following code from the inputmask.js plugin file as the source of the error:

keypressEvent: function (e, t, i, a, o) {
    var c = this.inputmask || this,
    u = c.opts,
    f = c.dependencyLib,
    p = c.maskset,
    d = c.el,
    h = f(d),//----------on this line error is generated
    m = e.key;

var inputMsk = $('#txtUsername').inputmask('999-9999-9999999-9');
inputMsk.inputmask('remove');
$('#txtUsername').on('input', function() {
    var fieldValue = $(this).val();
    if (fieldValue.startsWith('784')) {
        if ($('#txtUsername').inputmask) {
            inputMsk = $('#txtUsername').inputmask('999-9999-9999999-9');
        }
    } else {
        if ($('#txtUsername').inputmask) {
            inputMsk.inputmask('remove');
        }
    }
});

keypressEvent: function (e, t, i, a, o) {
  var c = this.inputmask || this,
  u = c.opts,
  f = c.dependencyLib,
  p = c.maskset,
  d = c.el,
  h = f(d),//----------on this line error is generated
  m = e.key;

答案1

得分: 1

我不太熟悉inputmask插件的先前经验，但我在您的代码示例上工作并得出了一个似乎有效的解决方案。

首先，类型错误是由插件的代码引发的。我不确定导致这个错误的确切原因，但在我看来，它似乎与删除掩码以及触发keyup事件处理程序的时机有关。这让我有一种预感，将.inputmask('remove')调用包装在具有超时值为0的setTimeout中可能会有所帮助 - 并且确实有帮助。有关更多信息，请参见：https://stackoverflow.com/q/779379/3397771。

setTimeout防止了错误，但它并没有清除掩码。所以我尝试用空字符串.inputmask('')重新设置掩码，而不是调用.inputmask('remove')。这似乎产生了所期望的效果。

const $input = $('#txtUsername');

$input.on('input', function() {
  const fieldValue = $input.val();
  
  if (fieldValue.startsWith('784')) {
    $input.inputmask('999-9999-9999999-9');
  } else {
    setTimeout(() => {
      $input.inputmask('');
    }, 0);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/inputmask@5.0.8/dist/jquery.inputmask.min.js"></script>
<input id="txtUsername">

请注意，这是您提供的代码的翻译版本。

<details>
<summary>英文:</summary>

I don&#39;t have much previous experience with the [inputmask plugin][1], but I worked on your code example and I arrived at a solution that seems to work.

First, the Type Error is being thrown by the plugin&#39;s code. I don&#39;t know exactly what is causing it, but it looks to me to have something to do with the timing of when the mask is removed and the handlers for the `keyup` event are fired. This gave me a hunch that wrapping the `.inputmask(&#39;remove&#39;)` call in a `setTimeout` with a timeout value of `0` could help - and it did. For more information on this, see: https://stackoverflow.com/q/779379/3397771.

The `setTimeout` prevented the error, but it did not clear the mask. So I tried re-setting the mask with an empty string, `.inputmask(&#39;&#39;)`, instead of calling `.inputmask(&#39;remove&#39;)`. This seems to have given the desired effect.

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-js --&gt;

    const $input = $(&#39;#txtUsername&#39;);

    $input.on(&#39;input&#39;, function() {
      const fieldValue = $input.val();
      
      if (fieldValue.startsWith(&#39;784&#39;)) {
        $input.inputmask(&#39;999-9999-9999999-9&#39;);
      } else {
        setTimeout(() =&gt; {
          $input.inputmask(&#39;&#39;);
        }, 0);
      }
    });


&lt;!-- language: lang-html --&gt;

    &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;https://cdn.jsdelivr.net/npm/inputmask@5.0.8/dist/jquery.inputmask.min.js&quot;&gt;&lt;/script&gt;
    &lt;input id=&quot;txtUsername&quot;&gt;

&lt;!-- end snippet --&gt;


  [1]: https://robinherbots.github.io/Inputmask/#/documentation

</details>