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

【问题标题】：How to move the textbox viewport when gaining focus?获得焦点时如何移动文本框视口？
【发布时间】：2009-08-30 18:44:48
【问题描述】：

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

问题是，如果 texbox 失去焦点，当它再次获得焦点时，视口总是设置在文本的开头，我希望它在结尾。

我尝试以编程方式将插入符号移动到文本的末尾并且它可以工作，但是视口仍在文本的开头，因此用户仍然必须按任意键才能将视口移动到文本的末尾.

示例

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

alt text http://img35.imageshack.us/img35/6697/10437837.jpg

这在失去焦点后：

alt text http://img11.imageshack.us/img11/1390/33816597.jpg

我希望当 txtbox 再次获得焦点时，视口的设置与第一张图片一样。

可以这样做吗？

【问题讨论】：

哎呀！我用示例中使用的标题发布了问题！已编辑
我无法用 FF3.5.2 重现这个。哪个浏览器将“视口”带到文本的开头？
遗憾的是我没有看到原标题的问题，那会很有趣:)
有问题的图片只是死链接。

标签： javascript jquery

【解决方案1】：

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

【讨论】：

如果我通过javascript向文本框添加文本，即使它没有失去焦点，也会发生同样的情况。不敢相信没有办法解决这个问题。
我接受你的回答，因为即使可以做到，对于像这样无关紧要的事情来说，一切都太老套了。

【解决方案2】：

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

您不能以模仿人类交互的方式模拟 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;
};

这里的 slice hack 是基于等宽字体的宽度 (12px) 与元素宽度的比率（无论它是什么）。所以，如果我们有一个 144 像素的盒子，并且我们正在处理等宽字体，我们知道我们可以一次在盒子里放 12 个字符——所以，我们以这种方式切片。

如果输入中的值的长度是 24 个字符，我们会做简单的数学运算，在字符串的第 (24 - (w/12)) 位置处切片。

全是 hack -- 老实说，这有什么实际应用吗？或许您应该在输入下添加一些潜文本，以提供文本最后一部分的类似省略号的预览。

【讨论】：

【解决方案3】：

我觉得在阅读了其他关于黑客等的答案后，我可能误读了这个问题，但我拼凑了一个在 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 几乎可以工作，也许你可以玩一下？至于Opera，我不知道。不过，我当然希望这对您有所帮助。

【讨论】：

【解决方案4】：

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

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

简单，跨浏览器工作，但有点hack-y。

【讨论】：

你为什么用hack-y这个词而不是hacky？

【解决方案5】：

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

使用 mootools：

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

【讨论】：