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

问题描述

这对我来说很奇怪，但在 Webkit 浏览器(Chrome/Safari，不是 Firefox)上，如果我在 的一串数字中包含一个空格 那么该输入的 value 为空.

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.

看到这个 JSFiddle:http://jsfiddle.net/timrpeterson/CZZEX/5/

See this 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</button>

$('button').click(function(){ 
    alert("withOut:"+$('#withOutspace').val()+" |||| with:"+$('#with_space').val());
});

如果你去这个JSFiddle，你会注意到with_space输入是空的.但是如果你在其中输入一个带有空格或任何非数字字符的数字，警报会说输入为空.

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?

推荐答案

技巧是使用 type="tel" 而不是 type="number".

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

这解决了两个主要问题:

This solves the 2 main issues:

1. 它会在移动设备上拉出一个数字键盘
2. 它使用数字或非数字作为输入来验证(并且非为空).

请看这个 JSFiddle:http://jsfiddle.net/timrpeterson/CZZEX/6/

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

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