JavaScript 插入符号位置

Posted 2023-03-31

【中文标题】JavaScript 插入符号位置

【英文标题】：JavaScript caret position

【发布时间】：2012-08-10 11:02:51

【问题描述】：

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

我已经测试过autoNumeric plugin 和jQuery Format Currency Plugin，但两者在 android 2.* 浏览器上都有光标位置问题。

有没有人有与此浏览器兼容的 javascript 解决方案？

【问题讨论】：

在使用数字掩码苦苦挣扎之后，我不得不为移动浏览器禁用它们（和其他）。据我所知，没有解决方法。

这个版本的安卓浏览器是不是不能正常支持obj.selectionStart和obj.selectionEnd？

如果您已经在使用 jQuery，您是否尝试过 jQuery++（我最近在捕获选项卡并输入按键后使用它来正确放置插入符号位置）？当我测试它时效果很好。无论如何，你总是可以使用他们的 Range 和 Selection 方法（不需要 jQuery）。 jquerypp.com

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

@DiogoCardoso 是的，我很快就知道尝试修改 type="number" 字段是不值得的。这有点令人难过，因为它具有我想要的内容过滤和移动设备上的软键盘选择......但如果我想以任何方式增强该字段，我需要恢复到“桌面”浏览器上的文本字段：- （

【参考方案1】：

我不知道 autoNumeric，但 http://code.google.com/p/jquery-formatcurrency/ 看起来不错。您发布的 jsFiddle 示例未将插入符号正确放置在我的桌面浏览器上，但确实如此，并且在我的（Jellybean）Android 手机上也是如此。 （在 Gingerbread 上，闪烁的光标栏可能会跳到行尾，但您仍将在上次的位置进行编辑。）试试他们的演示：http://www.bendewey.com/code/formatcurrency/demo/format_as_you_type.html

【讨论】：

此插件在 Andoid 2.* 浏览器上也存在光标位置问题。

【参考方案2】：

我通常使用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);" />

获取和设置插入符号位置函数是从这里获取的：Set keyboard caret position in html textbox

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

【讨论】：

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

【参考方案3】：

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

似乎可以满足您的需求，不是吗？ 不过还没有在Android下测试过。

【讨论】：

不幸的是似乎有一些Android问题：github.com/plentz/jquery-maskmoney/…

我的错。下次会检查问题。

【参考方案4】：

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

【讨论】：

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