如何在窄输入元素中移动可见文本以在末尾看到光标？

我遇到的问题是,给定一个输出元素的maxlength比元素的宽度宽(在其样式中设置),并且,如果给定的值比元素的宽度宽,我怎样才能获得元素"滚动"到文本的末尾.在IE中它很简单,我创建一个textRange对象,将其开始和结束位置放在文本的末尾,在该范围内调用select,然后将光标放在文本的末尾并将文本移动到结束了.在Firefox,Chrome,Safari中,尝试使用input元素的setSelectionRange将光标设置在正确的位置,但是文本没有移动以便我看到它的结束,而是开始.有没有人知道我可以将光标放在文本的末尾并移动文本以便我可以看到光标？

谢谢!

巴蒂尔

jthompson.. 7

我怀疑这是一个很棒的跨浏览器解决方案,但它确实似乎是在Firefox中的一个解决方案.我最初通过模拟右箭头按键来尝试它,但没有任何运气.

function setCursor(id)
{
    var elem = document.getElementById(id);

    elem.focus();
    elem.setSelectionRange(elem.value.length, elem.value.length);

    // 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);
}

有关initKeyEvent的更多信息,请点击此处.

我怀疑这是一个很棒的跨浏览器解决方案,但它确实似乎是在Firefox中的一个解决方案.我最初通过模拟右箭头按键来尝试它,但没有任何运气.

function setCursor(id)
{
    var elem = document.getElementById(id);

    elem.focus();
    elem.setSelectionRange(elem.value.length, elem.value.length);

    // 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);
}

有关initKeyEvent的更多信息,请点击此处.