HTML5输入类型号在Firefox中不起作用

Question

我在用HTML5 input type=number.它在Chrome浏览器中完美运行,但它不适用于Firefox和IE9.

我想通过oneie 增加数量,step=1我也设置了min=1.

我使用以下代码:

<form action="" class="cart" method="post" enctype='multipart/form-data'>
    <div class="quantity">
        <input type="number" step="1" min="1"  name="quantity" value="1" title="Qty" class="input-text qty text" />
    </div>
    <button type="submit" class="single_add_to_cart_button button alt">Add to cart</button>     
</form>

是否有任何补丁或黑客使其在Firefox和IE9中工作.或者,可能的解决方案是什么.

Answer 1

firefox或Internet Explorer不支持它,但版本11支持部分支持.请参阅此比较矩阵.

您可以使用数字polyfill shim来获得对不支持的浏览器的支持.

Answer 2

或者，您可以使用带有pattern=""属性的文本字段。虽然它没有向上和向下按钮，但它确实具有正确的值：

<input type="text"
       name="quantity"
       pattern="[1-9]"
       value="1"
       required
       title="Qty"
       class="input-text qty text"
/>

您可以根据您的数量希望更改模式，现在它的值设置为1到9。您也可以使用 JS/jQuery 添加向上/向下按钮，这些按钮绑定了热键以获得更像数字字段的感觉。

Answer 3

对于 React，我使用了一个简单而干净的实现来禁止 Firefox/Safari/Chrome 等中的字母......

<input type="number" onKeyDown={(event) => checkIfNumber(event)} />

checkIfNumber(event) {

   /**
    * Allowing: Integers | Backspace | Tab | Delete | Left & Right arrow keys
    **/

   const regex = new RegExp(/(^\d*$)|(Backspace|Tab|Delete|ArrowLeft|ArrowRight)/);
        
   return !event.key.match(regex) && event.preventDefault();
}

允许更多键：

通过在控制台中记录，event.key您可以检查按下的键的实际值，然后regex使用管道|符号将其添加到。

请记住，Integers如果您想允许floating数字（小数）使用以下regex模式，此解决方案仅允许

regex = new RegExp(/(^\d*\.?\d*$)|(Backspace|Tab|Delete|ArrowLeft|ArrowRight)/)

您可以在此处构建并检查您的正则表达式模式：

• https://regex101.com/

Answer 4

注意：Internet Explorer 9 及更早版本或 Firefox 不支持标记的 min 属性。

注意：min 属性不适用于 Internet Explorer 10 中的日期和时间，因为 IE 10 不支持这些输入类型。

资料来源： http: //www.w3schools.com/tags/att_input_min.asp