JavaScript文本光标位置

Question

我正在开发一款移动银行应用，对实时格式化货币金额输入很感兴趣。

我已经测试了autoNumeric插件和jQuery格式货币插件，但在Android 2.*浏览器上都存在光标位置问题。

有没有人能提供一个适用于这些浏览器的JavaScript解决方案呢？

- Diogo Cardoso

---

在与数字掩码的斗争中，我不得不为移动浏览器禁用它们（以及其他掩码）。据我所知，目前没有解决方法。 - Marcelo De Zen

如果你已经在使用jQuery，你是否尝试过jQuery++（我最近在捕获Tab和Enter键后使用它来正确放置插入符号位置）？在我的测试中效果非常好。无论如何，你总是可以使用他们的Range和Selection方法（不需要jQuery）。jquerypp.com - Joe Johnson

@JoeJohnson，您能否提供一个例子？ - Diogo Cardoso

@DiogoCardoso 输入字段是否实际具有 type="number" 属性？最近浏览器的一系列更改已经引起了问题。1.) Chrome 已经从数字字段中“删除”了 selection* 属性/方法（因此使用 JavaScript 进行操作的尝试非常有限），2.) Firefox 最近将验证与数字字段绑定，因此将 "4." 设置为部分值将失败，并且实际上会清空该字段，3.) Firefox 的最新验证现在使 <input type="number"/> 仅限于整数 - 您必须添加 step="any" 才能输入小数值。 - scunliffe

@DiogoCardoso 嗯，我很快就学会了，在尝试调整 type="number" 字段时，这并不值得。这有点令人沮丧，因为它具有我想要的内容过滤功能和移动设备上的软键盘选择...但是，如果我想以任何方式增强字段，我需要在“桌面”浏览器上回到文本字段：-( - scunliffe

Answer 1

我通常使用 accounting.js，您可以从 http://openexchangerates.github.io/accounting.js/#download 下载。

它非常易于使用。您可以从同一下载页面了解其工作原理。

我创建了几个 JavaScript 函数，用于进行光标管理：

        function formatMoney(myField){
            if(myField.selectionStart || myField.selectionStart == '0'){
                var len = myField.value.length;
                var caretPos = doGetCaretPosition(myField);
                myField.value = accounting.formatMoney(myField.value);
                var newlen = myField.value.length;
                setCaretPosition(myField, newlen != len ? (newlen > len ? caretPos + 1 : caretPos - 1) : caretPos);
            }
        }
        function doGetCaretPosition (ctrl) {

            var CaretPos = 0;
            // IE Support
            if (document.selection) {

                ctrl.focus ();
                var Sel = document.selection.createRange ();

                Sel.moveStart ('character', -ctrl.value.length);

                CaretPos = Sel.text.length;
            }
            // Firefox support
            else if (ctrl.selectionStart || ctrl.selectionStart == '0')
                CaretPos = ctrl.selectionStart;

            return (CaretPos);

        }
        function setCaretPosition(elem, caretPos) {
            elem.value = elem.value;
            if(elem != null) {
                if(elem.createTextRange) {
                    var range = elem.createTextRange();
                    range.move('character', caretPos);
                    range.select();
                }
                else {
                    if(elem.selectionStart) {
                        elem.focus();
                        elem.setSelectionRange(caretPos, caretPos);
                    }
                    else
                        elem.focus();
                }
            }
        }

您可以将文本字段与以下函数一起使用：

<input id="myField" type="text" onkeyup="formatMoney(this);" onChange="formatMoney(this);" onBlur="formatMoney(this);" />

获取和设置插入符位置的功能是从这里得到的：在html文本框中设置键盘插入符位置

我在Android 2.1模拟器上进行了测试。尽管模拟器很慢，但似乎工作正常。您可以在这里找到截图：https://www.dropbox.com/s/9ximuwh64kadiea/shot.JPG?dl=0

- Richboy

---

我已经在一个Android 2.3.6设备上测试了这个解决方案，但不幸的是光标位置的问题仍然存在。 - Diogo Cardoso

Answer 2

我不知道autoNumeric，但是http://code.google.com/p/jquery-formatcurrency/看起来很不错。你发布的jsFiddle示例在我的桌面浏览器上没有正确地放置插入符号，但这个链接可以，在我的（果冻豆）Android手机上也可以。（在姜饼上，闪烁的光标条可能会跳到行末，但您仍将编辑它最后所在的位置。）试试他们的演示：http://www.bendewey.com/code/formatcurrency/demo/format_as_you_type.html

- Sparky

---

这个插件在Andoid 2.*浏览器上也存在光标位置问题。 - Diogo Cardoso

Answer 3

这里有一个开源的、贡献良好、承诺良好的库：https://github.com/plentz/jquery-maskmoney

看起来它可以满足你的需求，不是吗？ 不过还没有在 Android 下测试过。

- Cyril CHAPON

---

很不幸，似乎存在一些Android问题：https://github.com/plentz/jquery-maskmoney/issues?utf8=%E2%9C%93&q=android - Diogo Cardoso

我的错。下次会检查问题。 - Cyril CHAPON

Answer 4

看起来这个 jQuery 插件 - NumBox - 旨在为您的问题提供解决方案。

- naXa stands with Ukraine

---

这个插件只有在失焦时更新输入内容，我需要一个实时更新值的解决方案。 - Diogo Cardoso