Номер типа ввода возвращает ноль для ввода события в операторе (+, -) - PullRequest
Новая
       57

Номер типа ввода возвращает ноль для ввода события в операторе (+, -)

0 голосов
/ 25 февраля 2019

Когда <input> тег типа number.который подписан на input событие

Возвращает "" пустую строку для входного значения +, даже если в поле ввода есть числовое значение. 

<input type="number" value="123" id="abc"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
    $("#abc").on('input', function(event) {
      console.log(event.target.value);
    });
  </script>

Мне просто нужно знать, почему происходит такое поведение, было бы очень полезно, если бы в Интернете был какой-либо ресурс, объясняющий это.Ожидание было '123+', но оно возвращалось ''

Я знаю, логически имеет смысл вернуть '', но мне нужно объяснение относительно этого поведения

Ответы [ 3 ]

0 голосов
/ 25 февраля 2019

Лучше использовать тип ввода текста и проверить тип ввода для принятия чисел и специальных символов (+, - и т. Д.).

Об этом уже сообщалось об ошибке, многие производители браузеров имеютнесогласие на размещение символов для ввода типа номера.

ссылка на bugzila для той же проблемы

0 голосов
/ 25 февраля 2019

Как подсказывает тип, для типа ввода "число" все другие входные данные, кроме чисел, считаются недействительными.Поэтому, что бы вы ни печатали, вы получите пустую строку в случае нечислового значения.Если вы хотите идентифицировать эти неверные данные, вы можете использовать этот обходной путь. 

$("#abc").on('input', function (event) {
        // Any Non-numeric value 
        if (this.validity.badInput) {
             console.log('Bad',event.target.value);
        }else{
                console.log('OK',event.target.value);
        }
    });
0 голосов
/ 25 февраля 2019

Согласно mdn номер типа ввода автоматически делает недействительной запись, которая не является номером. 

$("#abc").on('input', function(event) {
  console.log(event.target.value);
});
input:invalid {
  border: 1px solid red;
}

input:valid {
  border: 1px solid green;
}
<input type="number" value="123" id="abc" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
...