显示数字键盘在iPhone上使用输入文本

注意使用input type="number"可以如下显示数字键盘：显示数字键盘在iPhone上使用输入文本

enter image description here

是否有可能使用input type="text"显示相同的数字键盘？ I 不要想要使用pattern="\d*"显示数字键盘，因为该值可能包含小数点。

我想使用input type="text"而不是input type="number"的原因是，如果为数字字段输入非数字，我无法取回数值。例如，如果我输入ABC，它将自动变为空。在我看来，使用input type="text"将更容易进行这种控制。

来源

2013-05-09 red23jordan

这有什么错用'类型= “数字”'？ – deceze 2013-05-09 07:06:22

嗨，我已经编辑了我的问题。谢谢。 – red23jordan 2013-05-09 07:17:12

在HTML5.1中，有一个名为[“inputmode”]（http://www.w3.org/html/wg/drafts/html/master/forms.html#attr-fe-inputmode）的属性，它是支持这一点的预期方式。所以你应该有''但是，它并没有在HTML5中列出，所以我想现在它还没有实现太多。 – Alohci 2013-05-09 09:48:24

到目前为止我还找不到任何解决方案。

但你可以做的一个可能的技巧是使用type =“number”，并用document.getElementById（“element”）改变它在javascript中。

但尽管如此，这也将清除的ABC，但它会接受数字逗号和小数

来源

2013-05-16 19:35:27

是的，我用过，但键盘变成默认的键盘和数字键盘没有打开：（ – red23jordan 2013-06-03 01:29:10

在这里检查http://jsfiddle.net/svenkatreddy/REHyd/ 有了这个，你可以得到数字键盘和输入类型仍然是“文本”，但它不会接受Alphabhets（ABC将被清除）和数字键盘将只显示第一次，如果你想多次只是将输入的值存储在变量中并将其转换回输入类型“数字” 对不起，但这是目前唯一可用的黑客。 – 2013-06-04 00:04:05

还有其他类型的可显示数字键盘。

用type =“number”你什么都不能做。它不会接受任何数字。但是，如果你使用type =“tel”，这是一个丑陋的黑客攻击，但它是有效的。

这里是我的邮政编码例如：

<input type="tel" id="Address_ZipCode" class="zip-code" pattern="^\d{2}-\d{3}$" maxlength="6">

但是会有一个问题“ - ”在一些屏幕键盘键，就可以解决这个问题，添加后指定在JavaScript中的字符数破折号像这样：

// Zip Code dashes 
$('input[type="tel"].zipCode').keyup(function(event) { 
    var t = event.target, v = t.value; 
    if (v.length == 2) { t.value = v + '-'; } 
});

（请原谅jQuery）。而不是使用type =“tel”，你可以使用type =“text”和模式属性，但我还没有测试过。很可能它不适用于大多数浏览器。

来源

2013-10-11 16:47:57 Harry

在iphone上使用type =“tel”会出现一个键盘，无法输入小数点 – anztenney 2015-07-29 15:58:56

如果您的输入是真实数字，整数或小数，则使用HTML5 type="number"输入。这将在Android设备上显示正确的键盘（也假定Windows手机）。

然后诀窍是放置一个pattern="[0-9]*"该属性强制iOS上的特殊数字键盘。需要注意的是：

这并不标志着一个小数或负，因为模式属性actualy不是一个类型=“数字”域中有效签名是无效的！和
这是只有获取iOS数字键盘的方法。查看字母键盘的数字部分（如上面的屏幕截图）与真正的数字键盘相比的区别。

iOS number keyboards compared

最后一个音符时，一定不要使用种类号码栏的不是真正的数字（例如，有前导零或产品代码与昏迷或空格邮编）输入。数字输入字段可能不会提交非真实数字的值！（取决于浏览器/设备）

来源

2014-12-18 03:55:15 davidelrizzo

试试这个workarround。为我工作。

它会将类型转换为数字，然后返回文本。这将强制ios在第一次改变prop时切换到数字键槽。 setSelectionRange用于选择输入值。

$(function(){ 

    $("input[type='text']").on('mouseup', function(e){ 
     e.preventDefault(); 
    }); 

    $("input[type='text']").on('focus click', function(e){ 
     $(this).prop('type', 'number'); 
     var obj = $(this); 
     setTimeout(function(){ 
      obj.prop('type', 'text'); 
      document.getElementById(obj.attr('id')).setSelectionRange(0, 9999); 
     }, 50);  
    }); 
});

来源

2015-10-23 13:48:24

使用此代码：

<input type="number" pattern="[0-9]*" />

来源

2017-02-25 13:21:27

显示数字键盘在iPhone上使用输入文本

回答

相关问题