如果有空格或非数字字符，Webkit中的HTML5输入类型=数值是空的？ [英] HTML5 input type=number value is empty in Webkit if has spaces or non-numeric characters?

问题描述

如果我在< input type中的数字字符串中包含空格，这对我来说很奇怪，但在Webkit浏览器（Chrome / Safari，不是 Firefox） = number> ，那么该输入的值是空的

请参阅此JSFiddle ： http://jsfiddle.net/timrpeterson/CZZEX/5/

以下是代码：

 < input id ='withOutspace'type ='number'value ='123 > 
< input id ='with_space'type ='number'value ='123 123'> 
<按钮>按一下< /按钮> $（'button'）。click（function（）{
 alert（withOut：+ $（'＃withOutspace'）。val（）+|||| with ：+ $（'＃with_space'）。val（））; 
}）; 
  

如果您转到这个JSFiddle ，你会注意到 with_space 输入是空的。但是如果你把它放在一个有空格或任何非数字字符的数字中，警告就会说输入是空的。

很明显，这是一场灾难对于使用信用卡号码进行表单验证等，那么是否有人对此进行过破解？ 解决方案

code> type =tel而不是 type =number。

这解决了两个主要问题：

1. 它在移动设备上拉起数字键盘


2. 它用数字或非数字作为输入来验证（而且不是）为空。 看到这个JSFiddle： http://jsfiddle.net/timrpeterson/CZZEX/6/
   
   

   This is strange behavior to me but on Webkit browsers (Chrome/Safari, not Firefox) if I include a space in a string of numbers in an <input type=number> then the value of that input is empty.

   See this JSFiddle: http://jsfiddle.net/timrpeterson/CZZEX/5/

   Here's the code:

   <input id='withOutspace' type='number' value='123'>
   <input id='with_space' type='number' value='123 123'>
   <button>click</button>
   
   $('button').click(function(){ 
       alert("withOut:"+$('#withOutspace').val()+" |||| with:"+$('#with_space').val());
   });
   

   If you go to this JSFiddle, you'll notice that the with_space input is empty. But if you put it in it a number that has a space or any non-numeric characters, the alert will say that input is empty.

   Obviously, this is a disaster for form validation with credit card numbers, etc. so does anyone have a hack for this?

   解决方案

   The hack is to use type="tel" instead of type="number".

   This solves the 2 main issues:

   1. It pulls up a number keypad on mobile devices
   2. It validates (and is not empty) with numbers or non-numbers as input.

   Please see this JSFiddle: http://jsfiddle.net/timrpeterson/CZZEX/6/

   这篇关于如果有空格或非数字字符，Webkit中的HTML5输入类型=数值是空的？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！