Почему 1. возвращает пустую строку, когда я пытаюсь получить значение числа входного типа, используя javascript и html5?

Question

У меня есть нормальный вход следующим образом:

<input type="number" name="quantity" id="myInput">

Если я наберу "1" (без кавычек, конечно), когда я пытаюсь получить значение ввода с

document.getElementById("myInput").value

Получается только пустая строка.
Есть ли другой способ получить «1»? вход с помощью JavaScript?

Редактировать

Я работаю с использованием Polymer 1.0 и привязки данных, поэтому в своем примере я продемонстрировал использование обычного синтаксиса JavaScript с намерением найти решение своей проблемы, используя только javascript. Я просто хочу знать, как получить доступ к свойству, которое возвращает значение ввода, и которое, я считаю, должно храниться в каком-то свойстве объекта.

javascript html

1

Flavio Ochoa 15 Дек 2015 в 22:53

Answer 1

Я нашел способ получить недопустимые значения:

Фокус ввода.
Выберите его содержимое с помощью 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

Rick Hitchcock 16 Дек 2015 в 14:53

Answer 2

Он не будет работать, если вы введете 1., так как 1. не является допустимым числом.

0

void 15 Дек 2015 в 19:58

Answer 3

Обновление. Похоже, что использование 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>

0

TbWill4321 15 Дек 2015 в 20:02

Answer 4

Если вы используете <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, кажется, самый "щадящий" браузер из этих трех.

3

davidkonrad 15 Дек 2015 в 21:44

Почему 1. возвращает пустую строку, когда я пытаюсь получить значение числа входного типа, используя javascript и html5?

Редактировать

4 ответа

Похожие вопросы

Связанные вопросы

Новые вопросы

javascript