Javascript 获得焦点时如何移动文本框视口？

我有一个文本框，其中可能包含大于文本框大小的字符串。当我键入时，文本框“视口”总是移动以显示我键入的最后一个字符（例如，当你在一个SO问题中写了一个很大的标题时）。 a

问题是，如果texbox失去焦点，当它再次聚焦时，视口总是设置在文本的开头，我希望它位于末尾

我尝试通过编程将插入符号移动到文本的末尾，但视口仍然位于文本的开头，因此用户仍然必须按任意键才能将视口移动到文本的末尾

示例

这是失去焦点前的文本框：

在失去焦点之后：

我希望当txtbox再次获得焦点时，视口的设置与第一幅图像中的一样

---

有可能做到这一点吗？

Sry，但我认为这是不可能的。至少不是以干净和浏览器一致的方式。

有一种方法是在失去焦点后动态重新加载文本框

只需将字符串存储在变量中并删除文本字段，然后使用$.html（）或任何您喜欢的方法将其添加回变量中

---

很简单，可以跨浏览器工作，但有点粗糙

好的，您正在与浏览器和事件限制作斗争

您不能以模仿人机交互的方式模拟UI事件（这是一个安全问题）。但是，在一些DOM元素中，有一些内置的方法可以操作文本控件——textarea元素就是一个很好的例子，它带有selectionStart/selectionEnd（特定于浏览器的实现）变量。您可能应该注意到，在Firefox中，selectionStart/selectionEnd会产生您想要的效果，但同样，只能在Firefox下使用

因此，您的问题无法通过跨浏览器的方式解决。您必须通过文本切片等方式来模拟效果

下面是一个快速的伪代码示例，说明我的意思：

element.onblur = function (event) {
    this.hidden = this.value;
    if (this.value.length > (this.offsetsetWidth / 12)) {
        this.shown = this.value.slice(this.value.length - (this.offsetWidth / 12));
        this.value = this.shown;
    }
};

element.onfocus = function (event) {
    this.value = this.hidden || this.value;
};

这里的切分是基于单间距字体宽度（12px）与元素宽度（不管是什么）的比率。因此，如果我们有一个144px的方框，我们处理的是单间距字体，我们知道一次可以在方框中放入12个字符——因此，我们以这种方式切片

如果输入中的值的长度为24个字符，我们将在字符串的（24-（w/12））位置进行简单的数学切片

---

这完全是一种黑客行为——老实说，这有什么实际应用吗？也许你应该在输入下添加一些潜台词，让文本的最后一部分有一个省略号般的预览。

在阅读了其他关于黑客之类的答案后，我觉得我可能误读了这个问题，但我拼凑了一个在IE8和Firefox 3.5.2中运行良好的快速示例。假设输入元素具有id=“Test”，并调用以下函数onfocus：

function TestFocus()
{
    var Test = document.getElementById("Test");
    if (document.selection)
    {
            var SEnd = document.selection.createRange();
            SEnd.moveStart("character", Test.value.length);
            SEnd.select();
    }
    else if (Test.setSelectionRange)
    {
        Test.setSelectionRange(Test.value.length, Test.value.length);

        //- Firefox work around, insert a character then delete it
        var CEvent = document.createEvent("KeyboardEvent");
        if (CEvent.initKeyEvent)
        {
            CEvent.initKeyEvent("keypress", true, true, null, false, false, false, false, 0, 32);
            Test.dispatchEvent(CEvent);
            CEvent = document.createEvent("KeyboardEvent");
            CEvent.initKeyEvent("keypress", true, true, null, false, false, false, false, 8, 0);
            Test.dispatchEvent(CEvent);
        }
    }
    //- The following line works for Chrome, but I'm not sure how to set the caret position
    Test.scrollLeft = Test.scrollWidth;
}

---

在Firefox中，它使用initKeyEvent发送空格键，然后紧接着发送退格键。在Chrome中，我不知道如何将插入符号设置到末尾，但是在输入端设置scrollLeft几乎可以工作，也许你可以玩一下？至于歌剧，我不知道。不过，我当然希望这能帮到您。

在失去焦点时，将文本框的文本对齐css属性设置为右对齐

使用mootools：

$('#yourtextboxid').setStyle('text-align', 'right');

---

哇！我用示例中使用的标题发布了问题！EDITEDI无法使用FF3.5.2复制此内容。哪个浏览器将“viewport”作为文本的开头？遗憾的是，我没有看到带有原始标题的问题，这会很有趣：）所讨论的图像只是死链接。如果我通过javascript将文本添加到文本框，即使它没有失去焦点，也会发生同样的情况。真不敢相信没有办法解决这个问题。我接受你的答案，因为即使有可能做到这一点，对于像这样不相关的事情来说，一切都太不正常了。你为什么用hack-y这个词而不是hacky？