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

Posted 2023-03-05

【中文标题】使 -1 在 <input type=\'number\' /> 中显示为 \'unlimited\'

【英文标题】：make -1 appear as 'unlimited' in <input type='number' />使 -1 在 <input type='number' /> 中显示为 'unlimited'

【发布时间】：2019-06-04 11:01:23

【问题描述】：

我可以根据输入的值更改 html 的内容吗？

当输入为 -1 时，我希望它显示“无限”。

运行下面的sn-p。

要了解更多上下文，请知道我正在使用 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" />

【问题讨论】：

您的示例有一个number 类型的输入，它不能包含文本（只有数字），但您询问的是text 类型的输入

【参考方案1】：

你不能使用number 类型的输入而不诉诸诡计。

一种方法是求助于type="text" 并模仿type="number" 已经为您方便地做的事情（仅允许数字输入、范围、特定于用户代理的 UI）。通常结果很混乱。

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

我在这里通过在数字输入下方放置另一个只读输入字段来做到这一点。其他元素也可以，但另一个输入字段会给你一个一致的外观。

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 中测试过。

【参考方案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"/>

【讨论】：

他想改变输入的数字。不是免费的第二个字段。

数字输入不能显示“无限”！将数字输入更改为文本或我给出的解决方案

我完全同意，好先生。然而，您的回答并未解决所要求的内容。

问题指出 - 我可以更改 HTML 的内容，这就是我所做的

如果没有，不存在的东西不知道怎么改。