货币输入与Twitter Bootstrap(使用jQuery)

Currency input with Twitter Bootstrap (using jQuery)

本文关键字：使用 jQuery Bootstrap 输入 Twitter 货币      更新时间：2023-09-26

我正在使用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/

解释，而不是(或旁边)一个工作的例子是高度赞赏的。

这是输入字段'number'的类型。它有自己的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()返回空字符串。这就是为什么你的代码不能工作。如果"number"是必须的(例如，对于数字移动键盘)，一种方法是保留最后已知的正确val()并将其重新置于控制之下。

相关文章：