Question

我必须仅为字母的maxsize为3的数字创建输入字段。我怎么能这样做？

此代码不起作用：

<input type="number" class="input first" id="first"  placeholder="000" maxlength="3">

只有输入字段的类型为“text”时，maxlength才有效。还有其他解决办法。

此外：是否有解决方案禁用数字字段的浏览器图标？我使用类型编号的原因是为了更好地使用小型设备。但在普通屏幕上，自动图标非常难看。

谢谢！

Answer 1

使用max属性

JSfiddle

<input type="number" class="input first" id="first"  placeholder="000" max="999">

编辑 - （感谢'苔藓'）

支持： ie10 +（没有微调按钮） iOS＆amp; android浏览器不会显示微调器按钮或我们的min / max attrs， Opera Mini - 不支持opera mini。 Firefox已超过3个版本。

Chrome，Safari和Opera中的良好支持MDN

Answer 2

你必须做几件事：

使用JavaScript，您只允许使用三个数字。
使用CSS隐藏数字图标。见演示

JSfiddle

HTML

<input type="number" class="input first" id="first"  placeholder="000" min="1" max="999">

CSS

 input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        /* display: none; <- Crashes Chrome on hover */
        -webkit-appearance: none;
        margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
    }

的JavaScript

document.getElementById("first").oninput = function () {
    if (this.value.length > 3)
        this.value = this.value.slice(0,3); 
};

document.getElementById("first").onkeypress = function (evnt) {
return AllowNumber(evnt);
};

function AllowNumber(evnt) {
    var charCode = (evnt.which) ? evnt.which : evnt.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57) && charCode != 46)
        return false;
    return true;
};

Answer 3

最佳解决方案是使用javascript

function AllowNumber(evnt) { //alert("hf"); var charCode = (evnt.which) ? evnt.which : evnt.keyCode; if (charCode > 31 && (charCode < 48 || charCode > 57) && charCode != 46) return false; return true; }

在按键上调用上述功能!!

仅输入数字并添加最大数量的字母

3 个答案: