更新

Question

<md-input-container ng-if="vm.sellerActive" class="less-margin-input-container">
            <label data-translate>price</label>
            <input id="Price"
                   name="Price"
                   type="number"
                   ng-model="vm.price"
                   ng-pattern="vm.patternNegative"
                   required>
            <div ng-messages="-$error">
                <div ng-message="required">
                    <span data-translate>required</span>
                </div>
                <div ng-message="pattern">
                    <span data-translate>negative</span>
                </div>
            </div>
        </md-input-container>

在此输入图片说明如何删除那些箭头因为那些箭头，当聚焦它时，行可以滚动？

通常就像这样

当我点击该行时，箭头会出现。当我点击鼠标滚轮时，值会增加或减少

Answer 1

您遇到的是number输入的默认行为。数值将根据滚动位置增加/减少。

更新

我已经创建了一个指令，用于在输入类型编号上禁用鼠标滚动和箭头键（向上/向下）。

用法：

<input type="number" disable-it mousewheel="true" arrowkeys="true">

disable-it：指示
mousewheel：禁用滚动
arrowkeys：禁用向上/向下箭头

(function() {
  'use strict';
  angular
    .module('myApp', []);

  angular
    .module('myApp')
    .controller('MyController', MyController)
    .directive('disableIt', disableIt);

  MyController.$inject = [];

  function MyController() {

  }

  disableIt.$inject = [];

  function disableIt() {
    var DDO = {
      restrict: 'A',
      link: function(scope, element, attrs) {
        // Firefox: DOMMouseScroll
        // IE9, Chrome, Safari, Opera: mousewheel
        if (attrs.mousewheel && attrs.arrowkeys) {
          handleEvent('DOMMouseScroll mousewheel keydown');
        } else if (attrs.mousewheel && !attrs.arrowkeys) {
          handleEvent('DOMMouseScroll mousewheel');
          handleEvent('keydown');
        } else {
          throw new Error("Please give the boolean values to  mousewheel, arrowkeys properties");
        }

        function handleEvent(ev) {
          var code = null;
          element.on('focus', function(event) {
            element.on(ev, function(e) {
              if (e.type==='keydown') {
                code = (e.keyCode ? e.keyCode : e.which);
                if (code === 38 || code === 40) {
                  e.preventDefault();
                }
              } else {
                e.preventDefault();
              }

            });
          }).on('blur', function(e) {
            element.off(ev);
          });
        }
        
      }
    };

    return DDO;
  }
}());

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

<html>

<body>
  <div ng-app="myApp" ng-controller="MyController as MC">
    <input id="Price" name="Price" type="number" disable-it mousewheel="true" ng-model="MC.num" arrowkeys="true">{{MC.num}}
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</body>
</html>

如果您想隐藏<input type="number">中的箭头图标，可以使用以下CSS样式表：

input[type='number'] {
    -moz-appearance:textfield;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

您无法禁用滚动行为，但由于您使用的是ng-pattern，因此可以使用普通<input type="text">和默认验证。

md-input-container值可以在有值和聚焦时通过scrollng来改变

1 个答案:

更新

用法：