如何限制可以在iPhone上的HTML5数字输入字段中输入的字符数

问题描述

看起来，对于以下标记，maxlength，min或maxHTML属性都不会对iPhone产生期望的效果：

 < input type =numbermaxlength =2min =0max =99/> 
  

不再限制数字的位数或输入的数字的值，它是在iPhone 4上输入的。这个标记适用于我们测试过的大多数其他手机。

什么给予？

任何解决方法？

如果解决方案很重要，我们使用jQuery mobile。

谢谢！

解决方案

JS

c $ c>函数限制（元素）
{
var max_chars = 2;

if（element.value.length> max_chars）{
element.value = element.value.substr（0，max_chars）;
}
}

HTML

 < input type =numberonkeydown =limit（this）;的onkeyup = 限制（本）; > 
  

如果您使用jquery，您可以稍微收拾一下javascript：

JS

  var max_chars = 2; 
 $ b $（'＃input'）。keydown（function（e）{
 if（$（this）.val（）。length> = max_chars）{
 $ （this）.val（$（this）.val（）。substr（0，max_chars））; 
} 
}）; 
 $ b $（'＃input'）。keyup（function（e）{
 if（$（this）.val（）。length> = max_chars）{
 $ （this）.val（$（this）.val（）。substr（0，max_chars））; 
} 
}）; 
  

HTML

 < input type =numberid =input> 
  

It seems that neither of the "maxlength", "min" or "max" HTML attributes have the desired effect on iPhone for the following markup:

 <input type="number" maxlength="2" min="0" max="99"/>

Instead of limiting the number of digits or the value of the number entered, the number is just left as it was typed in on iPhone 4. This markup works on most other phones we tested.

What gives?

Any workarounds?

If it is important to the solution, we use jQuery mobile.

Thanks!

解决方案

Example

JS

function limit(element)
{
    var max_chars = 2;

    if(element.value.length > max_chars) {
        element.value = element.value.substr(0, max_chars);
    }
}

HTML

<input type="number" onkeydown="limit(this);" onkeyup="limit(this);">

If your using jquery you can tidy up the javascript a little:

JS

var max_chars = 2;

$('#input').keydown( function(e){
    if ($(this).val().length >= max_chars) {
        $(this).val($(this).val().substr(0, max_chars));
    }
});

$('#input').keyup( function(e){
    if ($(this).val().length >= max_chars) {
        $(this).val($(this).val().substr(0, max_chars));
    }
});

HTML

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

这篇关于如何限制可以在iPhone上的HTML5数字输入字段中输入的字符数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！