在文本输入中保持插入位置的可见位置 - Firefox的行为不当 [英] Keeping caret position in a visible position in text input - firefox misbehaves

问题描述

我正在玩弄我的文字输入框，点击一个包含标签选项的div来添加元内容。我的文本输入宽度为35，但我希望它能够溢出。

我已经搜索并找到方法来集中注意力并将我的脱字号放在最后更新的输入的内容，以及Chrome和IE浏览器的行为本身并自动滚动显示在输入框的可视区域内的光标，但在文字输入已满，溢出的Firefox 3.0.7离开正确定位插入符拿出来看，以右键（虽然如果你按下键盘上的右箭头，你可以到达它，而不会打扰的位置）。

任何帮助表示赞赏。

解决方案

谢谢，这对我jtompson。将它与现有的脚本结合，将插入符号移动到textinput的末尾，或者textarea似乎覆盖了IE7，FF3和chrome。

  function setCaretPosition（elemId，caretPos）{
 var elem = document.getElementById（elemId）; 
 
如果（ELEM！= NULL）{
如果（elem.createTextRange）{
变种范围= elem.createTextRange（）; 
 range.move（'character'，caretPos）; 
 range.select（）; 
} 
 else {
 if（elem.selectionStart）{
 elem.setSelectionRange（caretPos，caretPos）; 
 elem.focus（）; 
 // FF FF溢出的解决方法不滚动问题
 //触发一个空格按键。 
 var evt = document.createEvent（KeyboardEvent）; 
 evt.initKeyEvent（keypress，true，true，null，false，false，false，false，0，32）; 
 elem.dispatchEvent（evt）; 
 //触发一个退格键按键。 
 evt = document.createEvent（KeyboardEvent）; 
 evt.initKeyEvent（keypress，true，true，null，false，false，false，false，8,0）; 
 elem.dispatchEvent（evt）; 
} 
 else 
 elem.focus（）; 
 
 
 $ setCaretPosition（document.getElementById（searchinput）.id，document.getElementById（searchinput）.value.length）; 
  

I'm toying with the idea for my text input box of clicking on a div containing a selection of "tags" to add meta content. My text input has a width of 35, but I want it to be able to overflow.

I've searched and found methods to focus and position my caret at the end of the updated input content, and chrome and IE behave themselves and auto scroll to show the cursor in the visible area of the input box, but when the text input is full and overflows Firefox 3.0.7 leaves the correctly positioned caret out of view to the right (though if you press right arrow on keyboard you can get to it without disturbing the position).

Any help appreciated.

解决方案

Thanks, that works for me jtompson. Combined it with an existing script to move the caret to the end of a textinput or textarea seems to cover IE7, FF3, and chrome.

    function setCaretPosition(elemId, caretPos) {
        var elem = document.getElementById(elemId);

    if(elem != null) {
        if(elem.createTextRange) {
            var range = elem.createTextRange();
            range.move('character', caretPos);
            range.select();
        }
        else {
            if(elem.selectionStart) {
                elem.setSelectionRange(caretPos, caretPos);
                elem.focus();
                // Workaround for FF overflow no scroll problem
                // Trigger a "space" keypress.
                var evt = document.createEvent("KeyboardEvent");
                evt.initKeyEvent("keypress", true, true, null, false, false, false, false, 0, 32);
                elem.dispatchEvent(evt);
                // Trigger a "backspace" keypress.
                evt = document.createEvent("KeyboardEvent");
                evt.initKeyEvent("keypress", true, true, null, false, false, false, false, 8, 0);
                elem.dispatchEvent(evt);
            }
            else
                elem.focus();
        }
    }
}
 setCaretPosition(document.getElementById("searchinput").id, document.getElementById("searchinput").value.length);

这篇关于在文本输入中保持插入位置的可见位置 - Firefox的行为不当的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！