使 -1 在 <input type='number' /> 中显示为 'unlimited'

Question

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

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

运行下面的片段。

有关更多上下文，请知道我正在使用 Angular 7 和 Angular Material。

<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

这会起作用-

$("#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"/>

Answer 2

如果不使用诡计，您无法使用 number 类型的输入。

一种方法是诉诸 type="text" 并模仿 type="number" 已经为您方便地完成的操作（仅允许数字输入、范围、特定于用户代理的 UI） .通常结果很乱。

另一种方式是"hide"当数值为-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 中测试过。

使 -1 在 <input type='number' /> 中显示为 'unlimited'

make -1 appear as 'unlimited' in <input type='number' />

html

input

html-input