javascript - 使用 Twitter Bootstrap(使用 jQuery)输入货币

Question

我正在使用 Twitter Bootstrap (v3)，我想进行货币输入，我可以在其中输入固定货币(当前为欧元)的金额。

输入类型需要是 type="number" 因为我希望输入在移动设备上看起来如何(不是大的 QWERTY 键盘，只是数字)，但我确实希望允许多种模式。

我认为方法是使用 .on("input", callback) 方法，但我不确定如何实现。

我尝试了以下方法:

$(document).ready(function() {
    $("#amount").on("input", function() {
        // allow numbers, a comma or a dot
        $(this).val($(this).val().replace(/[^0-9,\.]+/, ''));
    });
});

(对于 HTML 和 CSS，请参阅 jsfiddle 链接)

但显然那是行不通的，否则我不会在这里发帖。每当您尝试输入无效内容时，整个字符串都会消失。

http://jsfiddle.net/bjcayhzb/1/

非常感谢解释而不是(或旁边)工作示例。

Answer 1

它是输入字段“数字”的类型。它有自己的 keyup/input 处理程序(现代浏览器也通过 JS 代码处理它)并且似乎会破坏某些东西。

如果你使用 <input type="text" required="" placeholder="42,00" class="form-control" id="amount" />那么这个工作:

$(document).ready(function() {
    $("#amount").on("input", function() {
        // allow numbers, a comma or a dot
        var v= $(this).val(), vc = v.replace(/[^0-9,\.]/, '');
        if (v !== vc)        
            $(this).val(vc);
    });
});

这种方法的唯一缺点是，如果您尝试将坏字符放在字符串的中间，光标会跳到末尾。当然，您可以键入多个点和逗号。

更好的方法是将最后一个有效值保存在数据中并测试整个字符串并在新字符使整个字符串的匹配无效时替换。

更新

当 input type="number"值包含非数字时，jQuery val() 返回空字符串。这就是您的代码无法正常工作的原因。如果“数字”是必须的(例如对于数字移动键盘)，一种方法是保留最后已知的正确 val() 并将其重新控制。