input的type为number

Posted 2020-12-27 zelzzz

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了input的type为number相关的知识，希望对你有一定的参考价值。

1、右侧出现上下加减按钮

　　不显示上下加减按钮

解决

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0;
}

2、maxlength不起作用如何解决

如：<input type="number" maxlength="11" >时maxlength失效，长度可以无限输入。(输入手机号常用)

解决：

<input type="number" oninput="if(value.length>11)value=value.slice(0,11)" onpaste="if(value.length>11)value=value.slice(0,11)">

oniput 是 输入 用户输入时触发
onpaste 是粘贴 用户粘贴时触发

或

使用 tel 属性

<input type="tel" maxlength="11">

以上是关于input的type为number的主要内容，如果未能解决你的问题，请参考以下文章