拆下增量和減量圖標從輸入字段

我有一個輸入如下：拆下增量和減量圖標從輸入字段

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

在渲染，它自動將增加和減少按鈕，如下所示。也正因爲如此，在最大長度不工作（例如：如果輸入999，我點擊的增量，它允許1000）

我嘗試了以下的回答：

https://stackoverflow.com/a/22306944

但是，沒有用。如何擺脫這些按鈕？

來源

2016-11-19 Abhi

在你鏈接的文章的評論背後，是使用tel輸入類型的建議：

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

一關於number類型的建議很少：

number輸入類型accept s min和max屬性來設置數量限制。

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

看到，因爲你似乎可以用灰燼，這很可能是更合適：

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

您仍然可以使用箭頭鍵來增加/減少值。

來源

2016-11-19 07:34:39 jlowgren

您可以使用像這樣
它爲我

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

來源

2016-11-19 07:33:34

一個解決方案是簡單地使用文本類型。例如，如果您使用驗證，這將不會有太大的改變。

爲了確保它們不會在該字段中插入文本，只需在將其保存到數據庫之前檢查該類型。

我希望這可能有些用處。如果有幫助，您也可以嘗試input type="tel"。

來源

2016-11-19 07:36:40

您的輸入

來源

2016-11-19 07:38:47

-1

REMOVE遞增遞減輸入場數的樣式添加-webkit-appearance: none;通過增加指令和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'); 
       }); 
      } 
     } 
    } 
})

>要隱藏的CSS -moz-appearance：textfield;

來源

2017-04-20 11:34:24 JcKanaparthi

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

來源

2017-06-06 12:27:41 JcKanaparthi

拆下增量和減量圖標從輸入字段

回答

相關問題