有没有办法绕过 jQuery val() 的不可能性来读取输入类型= "number"当第一个字符不是数字时 在某些浏览器中?



所以我遇到了一个问题,为了验证表单,我无法通过val()访问输入的val:
1)输入类型为"number"
2)输入值不是以数字

开头的

简化html:

<form id="input" class="pro" autocomplete="on">
    <table>
        <tbody>
            <tr>
                <td><input type="number"></td>
            </tr>
        </tbody>
    </table>
</form>

js:

$('input[type="number"]').each(function() {
   $(this).keyup(function() {
      alert($(this).val());
   });
});

.attr("value")

具有相同的行为

我已经检查了脚本是通过将类型更改为文本工作,它工作了…但我的输入需要是一个数字,遵循HTML5语义规则,这将是不正确的。

那么,有办法做到这一点,还是我只是错过了什么?

如果你不需要在你的标记中使用数字输入,我强烈建议使用这个jQuery插件。它做的正是你需要的,然后更多!

我没有测试过你的代码,但我的直觉告诉我,也许jQuery不能完全跟上HTML 5的速度。

欢呼:)

这看起来像是:"如果type='number'不能按你想要的方式工作,那么停止使用它"。当使用纯文本字段时,很容易将有什么转换为数字或查看有什么。

建议的标准是,无论用户尝试键入什么,.value属性必须始终返回一个有效的浮点数,因此,如果用户尝试在开头键入非数字字符,则不会反映在值中。

在Chrome中使用数字类型时,它有一些奇怪的行为。它似乎锁定并记住它拥有的最后一个有效数字,如果您输入非有效字符,它仍然返回它拥有的最后一个有效数字。当您失去焦点时,它会对字段内容进行消毒。你可以在这里玩:http://jsfiddle.net/jfriend00/HbUMP/。我已经从这种情况中删除了jQuery,这样就不会混淆它在普通HTML/JS之上可能做的事情。

@Joseph通过他的小提琴给了我一个想法,@Varun Vohra给了我一个转义输入的想法,这是一种方法:

$('#input input[type="number"]').each(function() {
    $(this).keyup(function(event) {
        if (!this.value) {
            this.value = '';
            // alert
        }
        else if (isNaN(this.value)) {
            this.value = '';
            //alert
        }
        else {
            // go on
        }
    });
});

第一个if在浏览器理解type="number"时使用,如果它是一个错误的值,则删除它。如果浏览器不理解它,那么它会检查它是否是一个数字。如果值是一个数字(可选),则会发生最后一个(else)。

这是因为当type=number的输入不以数字开头时,一旦失去焦点,它的值就会立即被擦除。

有一些复杂的解决方案允许您复制输入字段的值在一个隐藏的输入字段与type=text作为用户类型,但首先你要非常确定这是必要的,因为它不是很漂亮:)

你不能简单地测试输入的值是否为空吗?这可能意味着用户没有输入值,或者值不是数字。

编辑如果你澄清为什么你不能简单地测试输入的值是否为空,这仍然会有所帮助,但如果你不关心输入框旁边的小上下箭头(如果你关心,那么你可以用一些图像手动添加它们,并将单击事件绑定到它们),下面的操作也会起作用:

<input type="text />

JS

$('input').keypress(function(e){
    if(!(e.which >= 48 && e.which <=58)){ //tests if the key pressed is a number
       return false; //prevents the keypress if not a number
    } 
});

jsFiddle示例

我尝试了很多方法,但只有这个有效:

if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
    $('[type=number]').attr('type', 'text');
}

相关内容

最新更新