Question

我的输入如下：

<input id="phone_area_code" maxlength="3" type="number" class="ember-view ember-text-field">

渲染后，它会自动添加增量和减量按钮，如下所示。因此， maxLength 不起作用（例如：如果输入为999且我点击增量，则允许1000）

我尝试了以下答案：

https://stackoverflow.com/a/22306944

但是，没用。如何摆脱这些按钮？

Answer 1

隐藏在您关联的帖子中的评论中是建议使用tel输入类型：

<input type="tel" value="111">

关于number类型的一些建议：

number输入类型接受min和max属性来设置数量限制。

<input min="1" max="10" type="number" value="1">

看起来你似乎在使用Ember，这可能更合适：

{{input type="number" min="1" max="10"}}

如果你真的想要隐藏按钮：

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
}

input[type=number] {
  -moz-appearance: textfield;
}

<input type="number" min="1" max="10" value="1">

您仍然可以使用箭头键增加/减少值。

Answer 2

你可以这样使用
它对我有用

<html>
<head>
<style>
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}
</style>
</head>
Hello <input type='number'>
</html>

Answer 3

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
}

input[type=number] {
  -moz-appearance: textfield;
}

<input type="number" min="1" max="10" value="1">

Answer 4

一种解决方案是简单地使用文本类型。如果您使用验证，例如使用AngularJS，这不会有太大变化。

要确保它们不在该字段中插入文本，只需在将其保存到数据库之前检查类型即可。

我希望这可能会有所帮助。如果有帮助，您也可以尝试input type="tel"。

Answer 5

在输入的样式上添加-webkit-appearance: none;

Answer 6

下面是HTML代码，该代码使用以下两个功能限制了数字字段。

仅接受数字作为输入。
数字字段上的旋转按钮将不可见。

<html>
<head>
    <style>
        input[type=number]::-webkit-inner-spin-button,
        input[type=number]::-webkit-outer-spin-button {
            -webkit-appearance: none;
        }
    </style>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
    <input id="phone_area_code" maxlength="3" type="number" class="ember-view ember-text-field">
</div>
</body>
</html>

Answer 7

通过添加指令和CSS删除输入字段数中的增量

禁用功能的指令

.directive('input', function () {
    return {
        restrict: 'E',
        scope: {
            type: '@'
        },
        link: function (scope, element) {
            if (scope.type == 'number') {
                element.on('focus', function () {
                    angular.element(this).on('mousewheel', function (e) {
                        e.preventDefault();
                    });
                });
                element.on('blur', function () {
                    angular.element(this).off('mousewheel');
                });
            }
        }
    }
})

<强>＆GT;要隐藏的CSS -moz-appearance：textfield;

从输入字段中删除增量和减量图标

7 个答案: