如何在獲得焦點時移動文本框視口？

我有一個可能包含大於文本框大小的字符串的文本框。當我輸入時，文本框「視口」總是移動以顯示我輸入的最後一個字符（例如，當您在SO問題中編寫一個非常大的標題時）。 a如何在獲得焦點時移動文本框視口？

問題是，如果texbox失去焦點，當它再次聚焦時，視口總是被設置在文本的開始位置，我希望它在最後。

我試着將脫字符以編程方式移動到文本的末尾，它可以工作，但視口仍然在文本的開頭，所以用戶仍然必須按任意鍵將視口移動到文本的末尾文本。

例

這是失去焦點之前的文本框：

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

而且這個重點之後丟失：

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

我想，當txtbox再次獲得焦點的視口像第一張圖像一樣設置。

可以做到這一點嗎？

來源

2009-08-30 Drevak

whooops！我用這個例子中使用的標題發佈了這個問題！編輯 – Drevak 2009-08-30 18:47:58

我不能用FF3.5.2重現這一點。哪個瀏覽器帶來「視口」開始的文本？ – kangax 2009-09-05 02:01:09

恥辱我沒有看到它的原始標題的問題，這將是有趣的:) – 2009-09-10 12:47:43

Sry，但我不認爲這是可能的。至少不是乾淨和瀏覽器一致的方式。

來源

2009-08-30 18:47:55

如果我通過JavaScript將文本添加到文本框，即使它不失去焦點，也會發生相同的情況。不能相信沒有辦法解決這個問題。 – Drevak 2009-08-30 18:59:16

我接受你的答案，因爲即使可以做到這一點，對於與此無關的事情而言，一切都太過於無奈。 – Drevak 2009-09-10 17:24:29

有一種方法可能是在焦點丟失後動態重新加載文本框。

只需將字符串存儲在一個變量中，然後刪除文本字段，然後使用$ .html（）或任何您喜歡的方法將其添加到字符串中。

簡單，適用於各種瀏覽器，但有點黑客。

來源

2009-09-04 06:53:11 Isaac

爲什麼你使用術語* hack-y *而不是hacky？ – Pacerier 2011-06-17 07:27:48

好的，你在這裏與瀏覽器和事件限制作鬥爭。

您不能模擬UI-Event模仿人類交互（這是一個安全問題）。但是，某些內置方法可以操縱少數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; 
};

切片劈這裏是基於離等寬字型的寬度（12像素）與元件的寬度的比率（不管它是什麼）。所以，如果我們有一個144像素的盒子，並且我們正在處理一個等寬字體，我們知道我們一次可以在盒子中放入12個字符 - 所以，我們以這種方式進行切片。

如果輸入值的長度是24個字符，我們做簡單的數學在切片（24 - （W/12））個位置到字符串。

這一切都是黑客 - 而且，誠實地說，有沒有實際的應用呢？也許你應該在輸入文本的最後一部分的省略號預覽的輸入下添加一些子文本。

來源

2009-09-08 06:13:20

我覺得我可能已經閱讀其他的答案談論黑客和這樣的誤讀後的問題，但我拼成一個快速的樣品是工作在IE8和Firefox 3.5.2罰款。假設有一個id =「測試」並調用下面的函數的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，我不知道。我當然希望這可以幫助你在途中。

來源

2009-09-10 12:45:55

在firefox中很好用，thanx – aurora 2010-01-19 15:04:04

設置文本框的文本對齊CSS屬性失去焦點時，右對齊。

通過MooTools：

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

來源

2009-09-10 12:58:39 knittl

如何在獲得焦點時移動文本框視口？

回答

相關問題