сделать, чтобы -1 отображался как «неограниченный» в <input type = 'number' /> - PullRequest
Новая
       33

сделать, чтобы -1 отображался как «неограниченный» в <input type = 'number' />

0 голосов
/ 09 января 2019

Могу ли я изменить содержимое HTML в зависимости от значения ввода?

Когда ввод равен -1, я хочу, чтобы он отображал «неограниченно».

Запустите приведенный ниже фрагмент.

Для получения дополнительной информации знайте, что я использую 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" />

Ответы [ 2 ]

0 голосов
/ 09 января 2019

Вы не можете ввести тип number, не прибегая к хитрости.

Одним из способов было бы прибегнуть к type="text" и эмулировать то, что type="number" уже делает так удобно для вас (допускается только числовой ввод, диапазоны, пользовательский интерфейс, специфичный для пользовательского агента). Обычно получается довольно грязно.

Другим способом было бы «скрыть» введенный номер, если его значение равно -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.

0 голосов
/ 09 января 2019

Это будет работать- 

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