为 input[number] 中的箭头设置默认值

Posted 2023-03-05

【中文标题】为 input[number] 中的箭头设置默认值

【英文标题】：Set default value for arrows in input[number]

【发布时间】：2015-09-02 21:41:57

【问题描述】：

我有一个 input type="number" 用于选择应该加载为空的年份：

<input type="number" placeholder="Select year" min="1930" max="2015" required
   ng-custom-mask="9999" />

当用户通过箭头键选择年份时，它从min value: 1930 开始。它会像 1980 一样。

如何将自定义“开始”数字设置为 input[number]？

（任何 html5、javascript（甚至 AngularJS）都可以...）

【参考方案1】：

我有点晚了，但这可以通过解决方法“解决”：

将最小值和最大值设置为相同的值，在本例中为 1980 在更改时，检查 min==max（和 min==1980）是否 如果是，请将最小值和最大值设置为实际值

即

HMTL：

<input type="number" placeholder="Select year" min="1980" max="1980" required ng-custom-mask="9999" />

JQuery:

$("input[type=number]").on("change", function()
    if ($(this).attr("min") == $(this).attr("max") && $(this).attr("min") == 1980) 
        $(this).attr("min", 1930);
        $(this).attr("max", 2015);
    
);

【参考方案2】：

类似的东西呢：

HTML：

  <input 
     type="number" 
     placeholder="Select year" 
     min="1930" 
     max="2015" 
     required 
     ng-custom-mask="9999"
     ng-model="points" 
     step="getStep()" />

在您的控制器中：

  $scope.getStep = function() 
    if (!$scope.points) 
      return 50;
    
    return 1;
  

【讨论】：

可以在 Typescript 中做同样的事情吗？

【参考方案3】：

你可以添加一个值属性

    <input type="number" placeholder="Select year" 
    min="1930" max="2015" required ng-custom-mask="9999" value="1980"/>

【讨论】：

这种方法的缺点是input绑定到ngModel时会忽略value属性