-1 \f25 make -1\f6在<input type='number‘/> -1\f6中显示为-1\f25 'unlimited’-1\f6

Question

我可以根据输入值更改HTML< input /> =‘number’的内容吗？

当输入为-1时，我希望它显示为'unlimited‘。

运行下面的代码片段。

要了解更多上下文，请了解我使用的是Angular 7和Angular材质。

​

<p>When the below input value equals -1,<br/> I would like the input to display the text 'unlimited'. <br /> Is this possible? </p>

<input type="number" min="-1" />

​

Answer 1

对于类型为number的输入，您不能不采取欺骗手段。

一种方法是求助于type="text"并模拟type="number"已经为您做的事情(只允许数字输入、范围、特定于用户代理的UI)。通常情况下会变得相当混乱。

另一种方法是“隐藏”值为-1的数字输入，并通过其他方式显示文本"unlimited“。

我在这里通过在数字输入下面放置另一个只读输入字段来实现这一点。其他元素也可以工作，但另一个输入域将为您提供一致的外观。

​

let coolInput = document.getElementById('cool-input');

// Not sure if that covers everything
coolInput.addEventListener('keyup', handleInput);
coolInput.addEventListener('change', handleInput);
coolInput.addEventListener('paste', handleInput);

function handleInput() {
  if (coolInput.value == '-1') {
    coolInput.classList.add('unlimited');
  } else {
    coolInput.classList.remove('unlimited');
  }
}

form {
  position: relative;
}

input[type="text"],
input[type="number"] {
  color: #333;
  font-size: 16px;
  padding: 5px;
  width: 100px;
}
  
#unlimited-input {
  border: 1px solid #fff;
  position: absolute;
  z-index: -1;
}
  
#cool-input {
  background: #fff;
  border: 1px solid #999;
  opacity: 1;
}
  
#cool-input.unlimited {
  background: transparent;
  color: transparent;
}

<form>
  <input id="unlimited-input" type="text" readonly value="unlimited">
  <input id="cool-input" type="number" min="-1" placeholder="Amount">
</form>

​

(JSFiddle)

效果出奇的好。虽然还没有在IE和iOS中测试过。

Answer 2

这会起作用的-

​

$("#q").change(()=>{

if($("#q").val()==-1)
$("#w").val("unlimited")
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" min="-1" id="q"/>
<input type="text" id="w"/>

​