У меня есть нормальный вход следующим образом:
<input type="number" name="quantity" id="myInput">
Если я наберу "1" (без кавычек, конечно), когда я пытаюсь получить значение ввода с
document.getElementById("myInput").value
Получается только пустая строка.
Есть ли другой способ получить «1»? вход с помощью JavaScript?
Редактировать
Я работаю с использованием Polymer 1.0 и привязки данных, поэтому в своем примере я продемонстрировал использование обычного синтаксиса JavaScript с намерением найти решение своей проблемы, используя только javascript. Я просто хочу знать, как получить доступ к свойству, которое возвращает значение ввода, и которое, я считаю, должно храниться в каком-то свойстве объекта.
4 ответа
Я нашел способ получить недопустимые значения:
- Фокус ввода.
- Выберите его содержимое с помощью execCommand ().
- Захватите выбор, используя window.getSelection ().
Пример:
document.querySelector('input[type="submit"]').addEventListener('click', function() {
var inp= document.getElementById('myInput');
inp.focus();
document.execCommand('SelectAll');
var value = window.getSelection().toString();
document.getElementById('output').textContent = value;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" name="quantity" id="myInput">
<input type="submit">
<div id="output"></div>
Он не будет работать, если вы введете 1.
, так как 1.
не является допустимым числом.
Обновление. Похоже, что использование type="number"
означает, что определенные значения не вернутся. Вы можете переключить его на type="text"
и выполнить проверку самостоятельно:
document.getElementById('mySubmit').addEventListener('click', function() {
var value = document.getElementById('myInput').value;
if ( value != parseFloat(value) )
alert('Invalid Number');
document.getElementById('myOutput').innerHTML = value;
});
<input type="text" name="quantity" id="myInput">
<input type="submit" id="mySubmit">
<div id="myOutput"></div>
Если вы используете <input type="number">
, элемент обогащается дополнительным атрибутом valueAsNumber
. Так что вместо
document.getElementById("myInput").value
Использовать
document.getElementById("myInput").valueAsNumber
valueAsNumber
вернет NaN
вместо пробела, если значение, введенное во входные данные, не может быть преобразовано в число. Существует также атрибут validity
, содержащий информацию о состоянии текущего значения, как в соответствии со значением в качестве предполагаемого числа, так и в соответствии с настройками ввода числа, т.е. «почему число недействительным".
Удовольствие от ввода чисел, попробуйте это в различных браузерах:
<input type="number" name="quantity" id="myInput" ><br>
<input type="text" id="value" ><br>
<input type="text" id="valueAsNumber" ><br>
<input type="text" id="validity" ><br>
document.getElementById("myInput").onkeyup = function() {
document.getElementById("value").value = this.value;
document.getElementById("valueAsNumber").value = this.valueAsNumber;
document.getElementById("validity").value = '';
for (validity in this.validity) {
if (this.validity[validity]) {
document.getElementById("validity").value+=validity+' ';
}
}
}
На самом деле довольно информативно, если вы хотите точно выяснить, почему вы получаете пустое значение на входе -> http://jsfiddle.net/oaewv2Lr/ Пробовали с Chrome, Opera и FF - Chrome, кажется, самый "щадящий" браузер из этих трех.
Похожие вопросы
Связанные вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript / JS) и его различных диалектах / реализациях (кроме ActionScript). Включите все соответствующие теги в свой вопрос; например, [node.js], [jquery], [json] и т. д.