twitter-bootstrap 使用 Twitter Bootstrap 输入货币（使用 jQuery）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25345182/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Currency input with Twitter Bootstrap (using jQuery)
提问by Jochem Kuijpers
I'm using Twitter Bootstrap (v3) and I want to make a money input, where I can enter an amount of money with a fixed currency (currently ).
我正在使用 Twitter Bootstrap (v3) 并且我想进行货币输入，我可以在其中输入具有固定货币的金额（当前为 ）。
The input type needs to be type="number"because of how I want the input to look on mobile devices (not a big QWERTY keyboard, just numbers), but I do want to allow multiple patterns.
输入类型需要是type="number"因为我希望输入在移动设备上的外观（不是大的 QWERTY 键盘，只是数字），但我确实希望允许多种模式。
I think the way to go is with the .on("input", callback) method, but I'm not sure how to accomplish this.
我认为要走的路是使用 .on("input", callback) 方法，但我不确定如何实现。
I have tried the following:
我尝试了以下方法：
$(document).ready(function() {
$("#amount").on("input", function() {
// allow numbers, a comma or a dot
$(this).val($(this).val().replace(/[^0-9,\.]+/, ''));
});
});
(for the HTML and CSS, see the jsfiddle link)
（对于 HTML 和 CSS，请参阅 jsfiddle 链接）
But obviously that doesn't work, otherwise I wouldn't be posting here. Whenever you try to type something invalid, the whole string disappears.
但显然这行不通，否则我不会在这里发帖。每当您尝试输入无效内容时，整个字符串都会消失。
http://jsfiddle.net/bjcayhzb/1/
http://jsfiddle.net/bjcayhzb/1/
Explanation rather than (or alongside) a working example highly is appreciated.
高度赞赏解释而不是（或旁边）一个工作示例。
采纳答案by Alex Pakka
It is the type of input field 'number' that comes in the way. It has its own keyup/input handler attached (modern browsers deal with it via JS code too) and seems to break things.
阻碍的是输入字段“数字”的类型。它有自己的键盘/输入处理程序（现代浏览器也通过 JS 代码处理它）并且似乎破坏了一些东西。
If you use
<input type="text" required="" placeholder="42,00" class="form-control" id="amount" />then this works:
如果您使用，
<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);
});
});
The only drawback of this approach is that if you try to put bad character in the middle of the string, cursor jumps to the end. And, of course, you can type multiple dots and commas.
这种方法的唯一缺点是，如果您尝试将坏字符放在字符串中间，光标会跳到末尾。当然，您可以键入多个点和逗号。
Better approach would be to keep last good value stored in data and test the whole string and replace if new character invalidates match for the whole string.
更好的方法是保留存储在数据中的最后一个好的值并测试整个字符串，如果新字符使整个字符串的匹配无效，则替换。
Update
更新
When input type="number" value contains non-number, jQuery val() returns empty string. This is why your code is not working. If "number" is a must (e.g. for numeric mobile keyboard), an approach would be to keep last known correct val() and put it back into control.
当 input type="number" 值包含非数字时，jQuery val() 返回空字符串。这就是您的代码不起作用的原因。如果必须使用“数字”（例如，对于数字移动键盘），则一种方法是保留最后已知的正确 val() 并将其重新置于控制之下。
