当屏蔽字段具有“只读”属性时，jQuery Inputmask 插件会阻止表单提交

Posted 2023-05-08

【中文标题】当屏蔽字段具有“只读”属性时，jQuery Inputmask 插件会阻止表单提交

【英文标题】：jQuery Inputmask Plugin prevents form from submitting when a masked field has the "readonly" attribute

【发布时间】：2020-12-16 18:03:20

【问题描述】：

我正在使用这个 jQuery 插件 https://github.com/RobinHerbots/Inputmask 来启用输入字段屏蔽。

在某些表单中，我必须显示也应用了掩码的只读字段。然而，这会阻止表单通过 jQuery $("#form").submit() 提交。如果有人能帮我解决这个问题，我将不胜感激......

$('[data-inputmask]').inputmask();

$('#send').click(function() 
    $('#form').submit();
);
  
$('#send2').click(function() 
    $('#form2').submit();
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/RobinHerbots/jquery.inputmask@5.0.6-beta.12/dist/jquery.inputmask.js"></script>

<h4>Won't submit (includes readonly field)</h4>
<form id="form" action="" method="POST">
    <input readonly type="text" name="test" data-inputmask="'alias' : 'decimal'" value="123">
</form>
<button id="send">send</button>

<h4>Works fine:</h4>
<form id="form2" action="" method="POST">
    <input type="text" name="test" data-inputmask="'alias' : 'decimal'" value="123">
</form>
<button id="send2">send</button>

我想我将问题缩小到 inputmask 插件中的这段代码。如果表单具有只读字段，则似乎阻止了默认事件（提交）：

 var EventRuler = 
        on: function on(input, eventName, eventHandler) 
            var $ = input.inputmask.dependencyLib, ev = function ev(e) 
                e.originalEvent && (e = e.originalEvent || e, arguments[0] = e);
                var that = this, args, inputmask = that.inputmask, opts = inputmask ? inputmask.opts : void 0;
                if (void 0 === inputmask && "FORM" !== this.nodeName) 
                    var imOpts = $.data(that, "_inputmask_opts");
                    $(that).off(), imOpts && new _inputmask.default(imOpts).mask(that);
                 else 
                    if ("setvalue" === e.type || "FORM" === this.nodeName || !(that.disabled || that.readOnly && !("keydown" === e.type && e.ctrlKey && 67 === e.keyCode || !1 === opts.tabThrough && e.keyCode === _keycode.default.TAB))) 
                        switch (e.type) 
                            case "input":
                                if (!0 === inputmask.skipInputEvent || e.inputType && "insertCompositionText" === e.inputType) return inputmask.skipInputEvent = !1,
                                    e.preventDefault();
                                break;

                            case "keydown":
                                inputmask.skipKeyPressEvent = !1, inputmask.skipInputEvent = inputmask.isComposing = e.keyCode === _keycode.default.KEY_229;
                                break;

                            case "keyup":
                            case "compositionend":
                                inputmask.isComposing && (inputmask.skipInputEvent = !1);
                                break;

                            case "keypress":
                                if (!0 === inputmask.skipKeyPressEvent) return e.preventDefault();
                                inputmask.skipKeyPressEvent = !0;
                                break;

                            case "click":
                            case "focus":
                                return inputmask.validationEvent ? (inputmask.validationEvent = !1, input.blur(),
                                    (0, _inputHandling.HandleNativePlaceholder)(input, (inputmask.isRTL ? _positioning.getBufferTemplate.call(inputmask).slice().reverse() : _positioning.getBufferTemplate.call(inputmask)).join("")),
                                    setTimeout(function() 
                                        input.focus();
                                    , 3e3)) : (args = arguments, setTimeout(function() 
                                    input.inputmask && eventHandler.apply(that, args);
                                , 0)), !1;
                        
                        var returnVal = eventHandler.apply(that, arguments);
                        return !1 === returnVal && (e.preventDefault(), e.stopPropagation()), returnVal;
                    
                    e.preventDefault();
                
            ;
            input.inputmask.events[eventName] = input.inputmask.events[eventName] || [], input.inputmask.events[eventName].push(ev),
                [ "submit", "reset" ].includes(eventName) ? null !== input.form && $(input.form).on(eventName, ev.bind(input)) : $(input).on(eventName, ev);
        ,

编辑：我想知道这是一个错误，还是我做错了什么。

【问题讨论】：

我也遇到了同样的问题，但是我没有使用 jQuery.submit() 也会发生这种情况

【参考方案1】：

对于仍然遇到此问题的任何人：该问题已在版本 5.0.6-beta.15 中得到修复。

【参考方案2】：

所以，在花了hours 之后，我发现 你 这绝对是bug，因此你为什么会遇到这个issue。我将针对此错误提出github 问题，或者如果您想这样做，请告诉我。

如果您有一个包含任何disabled 或readonly 字段的form，您可以使用inputmask 的this script CDN 版本4.0 和5.0 版本之间没有区别，所有功能都是相同的.您的所有表单都将正常提交，所有input mask 工作正常。

现场工作演示：

$('[data-inputmask]').inputmask();

$('#send').click(function() 
  $('#form').submit();
);

$('#send2').click(function() 
  $('#form2').submit();
);

$('#send3').click(function() 
  $('#form2').submit();
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://rawgit.com/RobinHerbots/Inputmask/4.x/dist/jquery.inputmask.bundle.js"></script>

<h4>Will submit (includes readonly field)</h4>
<form id="form" action="" method="POST">
    <input readonly  type="text" name="test" data-inputmask="'alias' : 'decimal'" value="123">
</form>
<button id="send">send</button>

<h4>Will submit (includes disabled field)</h4>
<form id="form" action="" method="POST">
    <input disabled  type="text" name="test" data-inputmask="'alias' : 'decimal'" value="123">
</form>
<button id="send3">send</button>

<h4>Works fine:</h4>
<form id="form2" action="" method="POST">
    <input type="text" name="test" data-inputmask="'alias' : 'decimal'" value="123">
</form>
<button id="send2">send</button>

【参考方案3】：

按下按钮只需删除readonly 属性

     $("#send").click(function (e) 
          $("[data-inputmask]").removeAttr("readonly");
          $("#form").submit();
        );

显示在这里工作https://codesandbox.io/s/ecstatic-minsky-dp7ej?file=/index.html:1101-1237

【讨论】：

感谢您的回答，但这种懒惰的黑客不能解决问题。我想知道这是否是 inputmask 库中的错误，或者我在使用它时做错了什么。

我想我可以更具体地问这个问题。

原始问题：“。但是，这会阻止通过 jQuery $("#form").submit() 提交表单。如果有人能帮助我解决这个问题，我将不胜感激。 .” 你和其他人发布的 github 自述文件/问题对 preventDefault 没有响应，责备 => github.com/RobinHerbots/Inputmask/blame/5.x/lib/eventruler.js “懒惰的黑客”解决了你的问题，在没有推理的情况下，你可以分叉或解决问题。您应该想知道的一件事是为什么需要提交具有单个只读输入的整个表单 - 添加“继续”链接祝您好运！

这只是一个示例表单来说明问题。实际表单包含更多字段。感谢您的帮助。

如果它们都是只读的，用户没有输入 - 所以使用一个简单的按钮来转发它们，。如果它们是只读和可编辑字段的混合，并且您希望使用此库，“hack”可以让您继续 - 我看不出他们添加它的原因。