Как получить TEXT (не значение) ввода типа & ldquo; number & rdquo; [Дубликат]

In [5]: list(set(temp1) - set(temp2))
Out[5]: ['Four', 'Three']

Остерегайтесь

In [5]: set([1, 2]) - set([2, 3])
Out[5]: set([1]) 

, где вы можете ожидать / хотите, чтобы он был равен set([1, 3]). Если вы хотите, чтобы в качестве ответа вы set([1, 3]), вам нужно использовать set([1, 2]).symmetric_difference(set([2, 3])).

107
задан Ian Boyd 17 September 2013 в 18:34
поделиться

4 ответа

Согласно WHATWG , вы не сможете получить значение, если оно не является допустимым числовым вводом. Алгоритм дезинфекции поля ввода указывает, что браузер должен установить значение в пустую строку, если вход не является допустимым числом с плавающей запятой.

Алгоритм дезинфекции значения выглядит следующим образом: Если значение этого элемента не является допустимым числом с плавающей запятой , тогда вместо него установите его в пустую строку.

Указав тип (<input type="number">), вы просите браузер выполнить некоторую работу за вас. Если, с другой стороны, вы хотели бы иметь возможность фиксировать нечисловый ввод и что-то делать с ним, вам придется полагаться на старое поле для проверки и проверки подлинности текста и самостоятельно анализировать содержимое.

W3 также имеет те же спецификации и добавляет:

Пользовательские агенты не должны позволять пользователю устанавливать значение для непустой строки, которая не является допустимым числом с плавающей запятой.

50
ответ дан j08691 21 August 2018 в 15:57
поделиться
  • 1
    Было бы полезно, если бы пользовательские агенты не разрешали пользователю устанавливать значение для непустой строки, которая не является допустимым числом с плавающей запятой. Но если Whatwg говорит, что это невозможно сделать; тогда это ответ. Временное решение для моей текущей потребности добавлено ниже. – Ian Boyd 17 September 2013 в 16:45
  • 2
    Указав тип (<input type="number">), вы просите браузер выполнить некоторую работу для вас. Лично я просто просил мобильные браузеры отображать цифровую клавиатуру и получил подтверждение как неприятное дополнительно. Большинство из этих проблем связаны с тем фактом, что атрибут type определяет как правила проверки, так и правила о том, какой механизм ввода отображать, но вполне возможно, что вы хотите показать цифровую клавиатуру для мобильных пользователей, не требуя также проверки числа, применяемого для пользователей настольных компьютеров , HTML 5.1 по крайней мере решит эту проблему в конечном итоге с атрибутом inputmode. – Mark Amery 19 April 2014 в 23:54
  • 3
    но когда браузер не делает достаточно, я хотел бы иметь возможность завершить его. таких как удаление пробелов на входе, вывод десятичной точки ... – njzk2 28 May 2014 в 15:20
  • 4
    Кроме того, на разных языках, таких как французский, есть 2 слова для номера. один для чисел как идентификаторов, таких как номера кредитных карт, и один для подсчета чисел, например чисел с плавающей запятой. – njzk2 28 May 2014 в 15:43
  • 5
    @MotiKorets не работает для ввода чисел с плавающей запятой, так как iPhone не кладет десятичную точку на клавиатуру. К сожалению, разработчики довольно накручены на данный момент, поскольку обеспечивают приятную запись с плавающей запятой UX ... – Andy 17 December 2015 в 17:27

Он не отвечает на вопрос, но полезным решением является проверка

edQuantity.validity.valid

. Объект ValidityState дает информацию о том, что пользователь вводил. Рассмотрим вход type="number" с установками min и max

<input type="number" min="1" max="10">

Мы всегда хотим использовать .validity.valid.

Другие свойства предоставляют только информацию о бонусе:

Users Input   .value  .valid | .badInput  .rangeUnderflow  .rangeOverflow
============  ======  ====== | =========  ===============  ==============
""            ""      true   | false      false            false  ;valid because field not marked required
"1"           "1"     true   | false      false            false  
"10"          "10"    true   | false      false            false
"0"           "0"     false  | false      true             false  ;invalid because below min
"11"          "11"    false  | false      false            true   ;invalid because above max
"q"           ""      false  | true       false            false  ;invalid because not number
"³"           ""      false  | true       false            false  ;superscript digit 3
"٣"           ""      false  | true       false            false  ;arabic digit 3
"₃"           ""      false  | true       false            false  ;subscript digit 3

Вы должны убедиться, что браузер поддерживает проверку HTML5 до его использования:

function ValidateElementAsNumber(element)
{
   if ((element.validity) && (!element.validity.valid))
   {
      //if html5 validation says it's bad: it's bad
      return false;
   }

   //Fallback to browsers that don't yet support html5 input validation
   //Or we maybe want to perform additional validations
   var value = StrToInt(element.value);
   if (value != null)
      return true;
   else
      return false;
}

Бонус

У Spudly есть полезный ответ, который он удалил:

Просто используйте селектор CSS :invalid для этого.

input[type=number]:invalid {
    background-color: #FFCCCC;
}

Это

Поддержка браузера для <input type='number'> примерно такая же, как :invalid, поэтому проблем нет.

Подробнее о :invalid здесь .

Примечание: Любой код выдается в общедоступное доменное имя. Не требуется атрибуция.

47
ответ дан Ian Boyd 21 August 2018 в 15:57
поделиться
  • 1
    Не работает в Opera. Он говорит, что допустимый , даже если вы вводите строку. – Bergi 17 September 2013 в 16:32
  • 2
    Opera поддерживает свойство .validity, но неправильно обрабатывает .valid ?! – Ian Boyd 17 September 2013 в 16:35
  • 3
    Это так, но когда введен номер недопустимым ? Он просто действует так, как будто вход был пуст. A typeMismatch может иметь смысл, но это только для адресов электронной почты или URL-адресов ... – Bergi 17 September 2013 в 16:44
  • 4
    @Bergi В приведенной выше таблице приведены примеры, в которых числовые входы могут быть недействительными: «q», «11», (тогда максимум равен 10), "0" (когда мин равно 1), "& quot; (тогда элемент required) – Ian Boyd 17 September 2013 в 16:48
  • 5
    Добавлен @Bergi .badInput 11/20/2012 . Но никто не должен смотреть на badInput, чтобы убедиться, что вход действителен; они должны смотреть на .valid. Возможно (и правильно) для .badInput быть ложным и по-прежнему иметь недопустимый ввод. .valid определяется как отсутствие каких-либо ошибок проверки (например, несоответствие, переполнение, недополнение), из которых .badInput является только одним видом ошибок. Обратите внимание на таблицу выше, где .badInput имеет значение false, но вход по-прежнему недействителен. – Ian Boyd 17 September 2013 в 18:38
input.focus();
document.execCommand("SelectAll");
var displayValue = window.getSelection().toString();
11
ответ дан int32_t 21 August 2018 в 15:57
поделиться

Отслеживать все нажатые клавиши на основе их кодов клавиш

Предполагаю, что можно прослушать события keyup и сохранить массив всех введенных символов на основе их кодов клавиш. Но это довольно утомительная задача и, вероятно, склонна к ошибкам.

http://unixpapa.com/js/key.html

Выберите вход и получить выделение в виде строки

document.querySelector('input').addEventListener('input', onInput);

function onInput(){
  this.select(); 
  console.log( window.getSelection().toString() )
}
<input type='number'>

Весь кредит на: int32_t

3
ответ дан vsync 21 August 2018 в 15:57
поделиться
  • 1
    Это решение было опробовано в другом месте и не работает . Особенно, когда пользователи нажимают Delete, Backspace, Ctrl+X, Ctrl+V, Right-click-cut, Right-click-paste. – Ian Boyd 31 October 2013 в 14:30
  • 2
    Я согласен с вами, в основном то, что задал ОП, невозможно. Однако оба хака, о которых я упоминал (и они хаки, я не отрицаю этого), в какой-то мере работают. Может быть, они могут быть полезны кому-то, в каком-то случае? – sandstrom 31 October 2013 в 15:11
  • 3
    удивительно, что предмет выбора работает. Каковы ограничения этого метода? – njzk2 28 May 2014 в 16:24
  • 4
    Ограничения: текст визуально выбран. Если пользователь вводит что-то, контент будет удален – bfred.it 14 August 2015 в 23:01
  • 5
    Отредактировано живым демо, которое показывает, насколько плохо этот метод – vsync 17 May 2018 в 12:20
Другие вопросы по тегам:

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