题 JavaScript插入位置


我正在开发一个移动银行应用程序,我有兴趣实时格式化货币金额输入。

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

有没有人有与这个浏览器兼容的JavaScript解决方案?


40
2017-08-10 11:02


起源


在使用数字掩码后,我不得不为移动浏览器禁用它们(和其他人)。据我所知,没有解决方法。 - Marcelo De Zen
此版本的Android浏览器是否不支持 obj.selectionStart 和 obj.selectionEnd 正常吗? - scunliffe
如果您已经在使用jQuery,那么您是否尝试过jQuery ++(我最近在捕获选项卡并输入按键后使用它来进行正确的插入位置放置)?我测试时效果很好。无论如何,你总是可以使用他们的Range和Selection方法(不需要jQuery)。 jquerypp.com - Joe Johnson
@DiogoCardoso输入字段确实有 type="number" 属性?最近有一堆浏览器更改导致了问题。 1.)Chrome已“删除”了 selection* 来自数字字段的属性/方法(因此使用JavaScript进行操作的尝试非常有限,并且2.)Firefox最近将验证绑定到数字字段,因此设置说 "4." 因为部分值会失败,并且实际上会使该字段空白,并且3.)Firefox现在最近的验证 <input type="number"/> 限制为 整数只 - 你必须添加 step="any" 输入小数值 - scunliffe
@DiogoCardoso是的我很快就知道尝试修补type =“number”字段是不值得的。这有点令人伤心,因为它有我想要的内容过滤和移动设备上的软键盘选择......但是如果我想以任何方式增强字段,我需要恢复到“桌面”浏览器上的文本字段: - ( - scunliffe


答案:


我不知道autoNumeric,但是 http://code.google.com/p/jquery-formatcurrency/ 看起来很不错。您发布的jsFiddle示例并未将插入符号正确放置在我的桌面浏览器上,但这样做,以及我的(Jellybean)Android手机上也是如此。 (在Gingerbread上,闪烁的光标栏可能会跳到行的末尾,但您仍然会在最后的位置进行编辑。)尝试他们的演示: http://www.bendewey.com/code/formatcurrency/demo/format_as_you_type.html


1
2017-09-04 10:57



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


我通常使用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


1
2018-03-23 06:37



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


这是一个开源,贡献良好,提交良好的库: https://github.com/plentz/jquery-maskmoney

似乎回答你的需要,不是吗? 虽然没有在Android下测试它。


0
2018-03-23 23:40



不幸的是,似乎有一些Android问题: github.com/plentz/jquery-maskmoney/... - Diogo Cardoso
我的错。将在下次检查问题。 - Cyril CHAPON


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


-1
2018-03-21 08:48



这个插件只更新模糊的输入,我对一个实时更新值的解决方案感兴趣。 - Diogo Cardoso