Question

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

问题是如果texbox失去焦点，当它再次聚焦时，视口总是设置在文本的开头，我最后想要它。

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

示例

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

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

焦点丢失之后：

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

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

可以这样做吗？

Answer 1

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

Answer 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;
};

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

如果输入中的值的长度是24个字符，我们将简单的数学运算切换到（24 - （w / 12））'位置到字符串中。

一切都是黑客 - 说实话，这有什么实际应用吗？也许你应该在输入下添加一些子文本，给出文本最后部分的类似省略号的预览。

Answer 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，我不知道。我当然希望这会对你有所帮助。

Answer 4

一种有点黑客的方法是在焦点丢失后动态重新加载文本框。

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

简单，适用于各种浏览器，但有点骇人听闻。

Answer 5

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

用mootools：

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

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

5 个答案: