如何解决jQuery Inputmask插件可在蒙版字段具有“只读”属性时阻止表单提交
我正在使用此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插件中的这段代码。如果表单具有readOnly字段,则似乎阻止了默认事件(提交):
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);
},
编辑:我想知道这是一个错误还是我做错了什么。
解决方法
按下按钮后,只需删除readonly
属性
$("#send").click(function (e) {
$("[data-inputmask]").removeAttr("readonly");
$("#form").submit();
});
显示在这里工作https://codesandbox.io/s/ecstatic-minsky-dp7ej?file=/index.html:1101-1237
,因此,在花了hours
后,我发现您是您的人,因此肯定是bug
,因此为什么您会遇到issue
。我将为此错误提出一个github
问题,或者,如果您要这样做,请告诉我。
如果您的form
包含任何disabled
或readonly
字段,则可以使用this script CDN
的{{1}}版本{{1 }}和inputmask
版本的所有功能都相同。您所有的表格都将在所有4.0
工作的情况下正常提交。
实时工作演示:
5.0
input mask
,
对于仍然遇到此问题的任何人:该问题已在版本5.0.6-beta.15
中得以解决。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。