如何让HTML number类型年份输入框点击箭头时默认显示最大值

我完全懂你的痛点——用户选年份的时候，大概率是倾向于选最近的年份，默认跳到1950确实反直觉。咱们可以通过一点小处理，让点击箭头时默认从当前年份（2018）开始，同时保持输入框默认显示占位符的非必填状态。

针对你的Angular场景（从[max]绑定看你用了Angular） #

你可以给输入框加个模板引用变量，然后监听点击和聚焦事件，在输入框为空的时候自动填充最大值：

首先修改模板代码：

<input 
  type="number" 
  name="year" 
  placeholder="Year" 
  [max]="presentYear" 
  min="1950"
  #yearInput
  (click)="setDefaultYear(yearInput)"
  (focus)="setDefaultYear(yearInput)"
>

然后在组件类里添加对应的处理方法：

presentYear = 2018; // 假设你已经定义了这个变量

setDefaultYear(input: HTMLInputElement) {
  // 只有当输入框为空时才填充最大值，不干扰用户已输入的内容
  if (!input.value) {
    input.value = this.presentYear.toString();
  }
}

如果是原生HTML/JS场景 #

要是你不用框架，也可以用原生JS实现同样的效果：

<input 
  type="number" 
  name="year" 
  placeholder="Year" 
  max="2018" 
  min="1950"
  id="yearInput"
>

<script>
const yearInput = document.getElementById('yearInput');
const presentYear = 2018;

// 监听点击和聚焦事件，覆盖浏览器默认行为
yearInput.addEventListener('click', () => {
  if (!yearInput.value) {
    yearInput.value = presentYear.toString();
  }
});

yearInput.addEventListener('focus', () => {
  if (!yearInput.value) {
    yearInput.value = presentYear.toString();
  }
});
</script>

原理说明 #

浏览器默认的数字输入框逻辑是：当输入框为空时，点击上箭头会跳到最小值，点击下箭头跳到最大值。咱们通过在用户交互（点击/聚焦）时预先填充最大值，让箭头控件基于这个更符合用户预期的值开始增减，同时输入框在未交互时依然显示占位符，完全保留非必填的体验。

内容的提问来源于stack exchange，提问作者nmg49