17

I have a input as follows:

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

Upon rendering, it automatically adds the increment and decrement buttons as shown below. And because of this, the maxLength doesn't work (eg: if input is 999 and I click increment, it allows 1000)

enter image description here

I tried the following answer:

https://stackoverflow.com/a/22306944

But, no use. How to get rid of these buttons?

7 Answers 7

23

Hidden in the comments in the post you linked is a suggestion to use the tel input type:

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

A few suggestions regarding the number type:

The number input type accepts min and max attributes to set number constraints.

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

Seeing as you seem to be using Ember, this would probably be more appropriate:

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

If you truly want to hide the buttons:

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">

You can still use the arrow keys to increase/decrease the value.

4

You can use like this way
It worked for me

<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>
4

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">

1

add -webkit-appearance: none; on style of your input

0

One solution is to simply use a text type. This won't change much if you are using validation, with AngularJS for example.

To be sure they don't insert text into that field, simply check the type before saving it to your database.

I hope this may be of some use. You can also try the input type="tel", if that helps.

0

Below is the HTML code which restrict the number field with below two features.

  1. It will accept only number as input.

  2. Spin button on the number field will be invisible.

<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>
-1

REMOVE INCREMENT DECREMENTED IN INPUT FIELD NUMBER BY ADDING DIRECTIVE AND CSS

DIRECTIVE to Disable Functionality

.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');
                });
            }
        }
    }
})

> CSS to hide -moz-appearance: textfield;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.