在数字输入中显示自定义文本答案

【问题标题】：Show custom text in number input在数字输入中显示自定义文本
【发布时间】：2020-07-04 15:46:31
【问题描述】：

我有一个数字输入，我试图将其值设置为一些自定义文本。我不想使用 type="text" 因为我想让用户单击向上和向下微调器箭头来更改值。

<input type="number" id="note0" min="0" max="119" step="1" value="0"/>

但是，如果我尝试在 JavaScript 中设置它的值，则根本不会显示任何值，我只会收到以下警告：

指定的值“CsMin1”无法解析，或超出范围。

我正在尝试像这样更改值：

document.getElementById("note"+0).value = "CsMin1";

document.getElementById("note"+0).value = "CsMin1";

&lt;input id="note0" type="number" min="0" max="119" step="1" value="0"&gt;

如何模拟这种行为？

【问题讨论】：

您的<input> 的类型为“数字”，而“CsMin1”显然不是数字。
我想继续使用它，因为它在元素中有向上和向下箭头，但将值更改为字符串。
好吧，浏览器不愿意配合这个愿望。
@ChewieTheChorkie 这在本机是不可能的，但是您可以有一个文本输入，并在使用 JS 的箭头键按下时更改其值
也有可能

标签： javascript string object key

【解决方案1】：

您可以改用占位符属性来显示您的文本并使用 CSS 隐藏input 的实际值。您可以通过阻止输入上的 keydown、input 和 drop 事件来阻止用户在没有箭头的情况下更改值。当输入值发生变化时，如果为正，则按下向上微调箭头，如果不是，则按下向下微调箭头；使用此信息，您可以将占位符设置为适合您需要的值。

例子：

const input = document.getElementById("note0");
["keydown", "input", "drop"].forEach(ev=>input.addEventListener(ev, function(e){
    e.preventDefault();//prevent user changing input value
}));
input.addEventListener("input", function(e){
  if(this.value >= 1){//up arrow pressed
    this.placeholder = "text1";
  } else {//down arrow pressed
    this.placeholder = "text2";
  }
  this.value = "";//reset value to display placeholder
});

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {  
   opacity: 1;/*show arrows for webkit browsers*/
}
input[type=number]{
  color: transparent;/*hide input value*/
}
input[type=number]::placeholder {
    color: black;/*change placeholder color*/
    font-weight: bold;
}

&lt;input id="note0" type="number" min="0" max="1" step="1" placeholder="text"&gt;

在数组中存储自定义值的更复杂示例：

const input = document.getElementById("note0");
["keydown", "input", "drop"].forEach(ev=>input.addEventListener(ev, function(e){
    e.preventDefault();//prevent user changing input value
}));
let idx = 5;
let arr = Array.from({length:11}, (v,i)=>"text"+i);//["text0", "text1", ..., "text10"]
input.placeholder = arr[idx];
input.style.width = input.placeholder.length + 2 + "ch";
input.addEventListener("input", function(e){
  if(this.value >= 1){//up arrow pressed
    if(idx + 1 < arr.length){
      this.placeholder = arr[++idx];
    }
  } else {
    if(idx > 0){
      this.placeholder = arr[--idx];
    }
  }
  this.style.width = this.placeholder.length + 2 + "ch";//make input fit placeholder
  this.value = "";//reset value to display placeholder
});

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {  
   opacity: 1;/*show arrows for webkit browsers*/
}
input[type=number]{
  color: transparent;/*hide input value*/
}
input[type=number]::placeholder {
    color: black;/*change placeholder color*/
    font-weight: bold;
}

&lt;input id="note0" type="number" min="0" max="1" step="1"&gt;

【讨论】：