HTML5输入标记中的格式编号

时间:2016-06-28 13:01:07

标签: html5

这是我的输入

<input type="number" id="inputNumbers" step="0.01" ></input>

是否可以只允许用户输入与“0.00”模式匹配的数字,就像我在步骤属性中声明它的方式,而不使用JavaScript?

示例:如果用户键入“1.23”,然后尝试输入新的数字,小数或逗号,则不能,并且数字保持为“1.23”。

如果没有办法匹配step属性,是否可以只允许该数字中的一个小数?

3 个答案:

答案 0 :(得分:1)

我认为你可以尝试这样的事情:

input type="number" name="number" pattern="([0-9]{1,3}).([0-9]{1,3})" title="Must contain a decimal number">

请参阅here

添加了Plunkr: Plunker

答案 1 :(得分:0)

可以使用javascript并使用toLocaleString()处理特殊情况来实现

function getChange(){
  // 48 - 57 (0-9)
  var str1 = valueRef.value;
  if((str1[str1.length-1]).charCodeAt() < 48 || (str1[str1.length-1]).charCodeAt() > 57){
    valueRef.value = str1.substring(0,str1.length-1 );
    return;
  } 

 // t.replace(/,/g,'')
  let str = (valueRef.value).replace(/,/g,'');

  let value = +str;

  valueRef.value = value.toLocaleString();
}

Working Codepen Demo Link

答案 2 :(得分:-1)

function inputLimiter(e,allow) {
    var AllowableCharacters = '';

    if (allow == 'custom'){AllowableCharacters=' 1234567890.';}


    var k = document.all?parseInt(e.keyCode): parseInt(e.which);
    if (k!=13 && k!=8 && k!=0){
        if ((e.ctrlKey==false) && (e.altKey==false)) {
        return (AllowableCharacters.indexOf(String.fromCharCode(k))!=-1);
        } else {
        return true;
        }
    } else {
        return true;
    }
    
    }
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="NameCharacters" onkeypress="return inputLimiter(event,'custom')" value="" maxlength="4" /></p>

在Javascript中。但就我而言,只要将其留在这里一段时间,就需要处理其他事情。