获得焦点时如何移动文本框视口？
我有一个文本框，可能包含大于文本框大小的字符串。 当我输入时，文本框“viewport”总是移动以显示我输入的最后一个字符（例如，当你在SO问题中写一个非常大的标题时）。 一个
问题是如果texbox失去焦点，当它再次聚焦时，视口总是设置在文本的开头，我最后想要它。
我尝试以编程方式将插入符号移动到文本的末尾并且它可以工作，但视口仍然在文本的开头，因此用户仍然必须按任意键将视口移动到文本的末尾。
例
这是失去焦点之前的文本框：
alt text http://img35.imageshack.us/img35/6697/10437837.jpg
焦点丢失之后：
alt text http://img11.imageshack.us/img11/1390/33816597.jpg
我希望当txtbox再次获得焦点时，视口的设置与第一张图像相同。
可以这样做吗？
Sry，但我不认为这是可能的。 至少不是以干净和浏览器一致的方式。
好的，你在这里与浏览器和事件限制作斗争。
您无法以模仿人工交互的方式模拟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几乎可以正常工作，也许你可以玩一下它？ 至于Opera，我不知道。 我当然希望这可以帮助你。
一种有点黑客的方法是在焦点丢失后动态重新加载文本框。
只需将字符串存储在变量中并删除文本字段，然后使用$ .html（）或其他任何方法将字符串添加回其中。
简单，适用于各种浏览器，但有点hack-y。
在失去焦点时，将文本框的text-align css属性设置为右对齐。
与mootools：
$('#yourtextboxid').setStyle('text-align', 'right');