javascript - 移动输入无法以编程方式更新

Question

所以我有一个 input[type="number"] (最好有一个 pattern="[0-9]*" 属性来调出正确的键盘在 iOS 中(iPhone，不适用于 iPad))

当我以编程方式更新该值时，iOS 搞砸了，Android 完全拒绝工作。

我这里有一个小测试用例:http://jsfiddle.net/9QUPe/

基本上，键盘(至少在 iOS 上)不会为您提供小数位，因此我想为用户添加它。

$('input').on('keyup', function(){
    var val = this.value.replace('.','');
    if(val.length <= 2){
        this.value = '.'+val
    }else{
        this.value = val.slice(0,-2) +'.'+ val.slice(-2);
    }
});

在 Chrome (Win7) 上完美运行 - 但 iOS 不接受零(即使数据保存为字符串)，Android 只会完全清空输入(无论是否是模式)属性存在(有关此测试用例，请参阅 Android 上的 http://jsfiddle.net/9QUPe/1)。

关于如何让它发挥作用有什么想法吗？

Answer 1

我想我可以用 input type="tel" 替换 input type="number" ，它提供了类似的键盘，并且可以在 iOS/Android 上正常工作- 但引入了附加字符 ,;+*#-()N...

所以我想出的解决方案是使用 type="tel" 并删除那些额外的字符。

$('input').on('keyup change', function() {
    var val = this.value;
    val = val.replace(/\D/g, '');

    if (val.length <= 2) {
        this.value = '.' + val;
    } else {
        this.value = val.slice(0, -2) + '.' + val.slice(-2);
    }
});​

(参见 http://jsfiddle.net/9QUPe/9/ )