为什么在Safari中<input type="number" maxlength="3">无法工作？

Question

我想要一个最多只能输入3个字符的输入框。在Firefox中一切正常，我只能在输入框中输入3个数字，但是在Safari中可以输入很多数字。

您可以使用此链接在两个浏览器中进行测试：http://flowplayer.org/tools/demos/validator/custom-validators.htm

目前，我使用了一个验证插件来实现这个功能，但是出于兴趣，我想知道为什么它不能正常工作？

编辑：

使用以下内容可以让它正常工作：

<input class="required" id="field" type="text" maxlength="3" pattern="([0-9]|[0-9]|[0-9])" name="cvv"/>

答案： 如何防止文本元素中的字母出现？

- Jules

---

你可以使用属性 max 和 min。请参考 https://dev59.com/rWsy5IYBdhLWcg3wvgdl - Marwelln

这很奇怪，max和min也不起作用了！？ - Jules

Answer 1

我用以下方法完成了它:

<input class="required" id="field" type="text" maxlength="3" pattern="([0-9]|[0-9]|[0-9])" name="cvv"/>

然后在JavaScript中，我防止了字母的输入：

$("#myField").keyup(function() {
    $("#myField").val(this.value.match(/[0-9]*/));
});

- Jules

---

我认为你可以在你的模式中使用[0-9]{3}代替[0-9][0-9][0-9]（至少我知道它可以在Chrome中工作）。 - Seeven

在iOS上很好，但在安卓上键盘仍显示为文本而非数字。 - lizlux

@lizlux 添加属性 inputmode=numeric。 - OdraEncoded

规格很荒谬，我们需要从type="number"更改为type="text"并使用pattern和javascript是荒谬的。 - Nuno Furtado

仅作为评论，使用type="text"会失去在移动设备上显示键盘的能力，如果您的应用程序是面向移动端的，请记住这一点。 - apereira

Answer 2

您可以尝试使用以下type="text"和oninput。这将仅允许输入数字。

<input type="text" maxlength="3" oninput="this.value=this.value.replace(/[^0-9]/g,'');" id="myId"/>

- Viktor Karpyuk

---

谢谢。这是一个不错的解决方案。 - Shakoor Hussain Attari

Answer 3

使用onKeyDown可以限制长度

<input type="number" onKeyDown="if(this.value.length==10 && event.keyCode!=8) return false;">

愉快编码 :)

- Surya R Praveen

Answer 4

基本上，Max和Min属性目前在Safari浏览器中还不被支持。我看不出语法上的任何缺陷。你使用的是Safari 1.3+版本吗？还是低于该版本？因为maxlength属性是从Safari 1.3+开始支持的。

- Mohan Kumar

---

谢谢 :) 我正在使用Safari 1.5.2。我发现它像下面这样： - Jules

Answer 5

我使用了与@Jules答案非常相似的东西，只是他的答案不允许使用像shift+home这样的键。由于我们正在验证数字，因此我在keyup函数中使用了isNaN。

$("#myField").keyup(function() {
    var e = $("#myField");
    if(isNaN(e.val())){
        e.val(e.val().match(/[0-9]*/));
    }
});

With...

<input id="#myField" inputmode="numeric" maxlength="3" pattern="([0-9]{3})" type="text" />

- Travis Peterson

Answer 6

这是一个更简单的解决方案。对我而言它起作用了。

<input type="number" id="cvv">


$("#cvv").on("keypress", function(evt) {
  var keycode = evt.charCode || evt.keyCode;
  if (keycode == 46 || this.value.length==3) {
    return false;
  }
});

这个JS块将防止“.”（点）输入，因此无法输入浮点数。我们将输入类型保持为数字，因此只能输入数字。如果值的长度为3，则会返回false，因此输入长度也受到限制。

- Subhabrata Banerjee

Answer 7

这个东西对我来说很有效...基本上Safari和Firefox仍然允许你输入无效字符，并在提交时删除整个内容。

<input
    onInput={(event) => {
        if(!event.target.validity.valid) event.target.value = 
    this.state.value
    }}
/>

- BeardedSalami

Answer 8

https://jsfiddle.net/zxqy609v/8/

function fixMaxlength(inputNumber) {
  var maxlength = $(inputNumber).attr("maxlength");
    $(inputNumber).keyup(function (evt) {
    this.value = this.value.substring(0, maxlength);
    this.value = this.value.replace(/\D/g, '');
  });
}

- jwang

Answer 9

在 input type="number" 中，您无法使用 maxlength 和 minlength 函数。

相反，您可以使用正则表达式来解决这个问题：
(?=.*[0-9]) - 必须只包含数字

{10,10} - 最小长度和最大长度必须为 10。您可以更改这些值。

<input type="number" pattern="(?=.*[0-9]).{10,10}" />

使用

pattern="(?=.*[0-9]).{10,10}"

- Himanshu Raj

---

Chrome正在忽略正则表达式，其他浏览器的情况不确定。 - DeZeA