首页 文章

如何将原始值设为<input type =“number”>字段？

提问于
浏览 次
109

如何获得 <input type="number"> 字段的"real"值？

我有一个 input 框，我正在使用更新的HTML5输入类型 number ：

<input id="edQuantity" type="number">

这主要在Chrome 29中受支持：

enter image description here

我现在需要的是能够读取用户在输入框中输入的"raw"值 . 如果用户输入了一个数字：

enter image description here

那么 edQuantity.value = 4 ，一切都很好 .

但是如果用户输入了无效文本，我想将输入框的颜色设置为红色：

enter image description here

不幸的是，对于 type="number" 输入框，如果文本框中的值不是数字，则 value 返回一个空字符串：

edQuantity.value = "" (String);

（至少在Chrome 29中）

如何获得 <input type="number"> 控件的"raw"值？

我试着浏览Chrome的输入框的其他属性列表：

enter image description here

我没有看到任何类似于实际输入的东西 .

我也找不到方法来判断是否是"is empty"框 . 也许我可以推断：

value          isEmpty        Conclusion
=============  =============  ================
"4"            false          valid number
""             true           empty box; not a problem
""             false          invalid text; color it red

Note ：您可以忽略水平规则后的所有内容;它让例子与问题混淆了 . 人们可能希望得到这个问题的答案，除了将红色框着色之外的原因（一个例子：在onBlur事件期间将文本 "four" 转换为拉丁文 "4" 符号）

如何获得 <input type="number"> 控件的"raw"值？

奖金阅读

javascript html5 validation input

4 回答

  • 3

    根据WHATWG，你不应该't be able to get the value unless it'有效的数字输入 . 输入数字字段's sanitization algorithm says the browser is supposed to set the value to an empty string if the input isn' t是有效的浮点数 .

    值清理算法如下：如果元素的值不是有效的浮点数，则将其设置为空字符串 .

    通过指定类型（ <input type="number"> ），您希望能够捕获非数字输入并对其执行某些操作，您必须依赖旧的经过验证的文本输入字段并自行解析内容 .

    W3也有相同的规格并添加：

    用户代理不得允许用户将值设置为非空字符串，该字符串不是有效的浮点数 .

    回复于
  • 47

    它没有回答这个问题，但有用的解决方法是检查

    edQuantity.validity.valid

    对象的ValidityState提供了有关用户输入内容的线索 . 考虑具有 min 和 max 集的 type="number" 输入

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

    我们总是想使用 .validity.valid .

    其他酒店仅提供奖励信息：

    User's 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)
{
   //Public Domain: no attribution required.
   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：无效的选择器 . 输入[type = number]：无效{
    background-color：#FFCCCC;
    }
    只要输入非数字有效，这将触发您的元素变为红色 . 浏览器对<input type ='number'>的支持大致相同：invalid，所以没问题 . 阅读更多信息：此处无效 .

    回复于
  • 11
    input.focus();
document.execCommand("SelectAll");
var displayValue = window.getSelection().toString();
    回复于
  • 52

    Track all pressed keys based on their key codes

    我想人们可以听取键盘事件并根据键码保留所有输入字符的数组 . 但这是一项相当繁琐的任务，可能容易出错 .

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

    Select the input and get the selection as a string

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

function onInput(){
  this.select(); 
  console.log( window.getSelection().toString() )
}

    <input type='number'>

    全部归功于： int32_t

    回复于

相关问题