具有占位符属性的 Firefox data-val 属性可防止用户输入答案

【问题标题】：Firefox data-val attribute with placeholder attribute prevents user input具有占位符属性的 Firefox data-val 属性可防止用户输入
【发布时间】：2015-11-04 09:26:36
【问题描述】：

这适用于所有其他浏览器的最新版本，但在 Firefox 上失败。在 Firefox 中，文本框将不接受键盘输入。

@Html.EditorFor(m => m.Extension, new { htmlAttributes = new { @class = Model.DigitsOnlyClassName, @placeholder = Resources.PhoneExtension } })

<input class="phoneDigitsOnly text-box single-line" data-val="true" data-val-maxlength="The field Ext must be a string or array type with a maximum length of '10'." data-val-maxlength-max="10" id="Phone_Extension" name="Phone.Extension" placeholder="Ext" value="" type="text">

当您删除 data-val-maxlength-max 属性或占位符时，文本框将接受键盘输入。

我已经搜索过，但找不到任何关于这是 Firefox 错误的具体信息。是吗？

更新：从类中删除 phoneDigitsOnly 还允许控件工作。这个类有一个只允许数字的事件。

这很奇怪，删除 3 个中的 1 个允许输入。

【问题讨论】：

标签： html firefox asp.net-mvc-5 placeholder validation

【解决方案1】：

解决了！想知道为什么我遇到的错误只在Firefox中以这种方式表现出来。

我换了……

$('.phoneDigitsOnly').keypress(function (e) {
            if (String.fromCharCode(e.keyCode).match(/[^0-9]/g)) return false;
        });

与

$('.phoneDigitsOnly').keypress(function (e) {
            var code = e.keyCode || e.which;
            // Don't validate the input if below arrow, delete and backspace keys were pressed 
            if (code == 37 || code == 38 || code == 39 || code == 40 || code == 8 || code == 46) { // Left / Up / Right / Down Arrow, Backspace, Delete keys
                return;
            }
            if (String.fromCharCode(code).match(/[^0-9]/g)) return false;
        });

请注意需要额外的关键代码处理。同样只有 Firefox 需要，箭头、删除和退格键都可以在 Chrome 和 IE 最新版本中使用。

【讨论】：