在 Web 應用程式的世界中,經常會遇到容納長 URL 的文字輸入欄位。雖然這為 URL 提供了足夠的空間,但通常會導致 URL 的開頭被顯示,而資訊更豐富的結尾仍然被隱藏。
挑戰:
導航在文字欄位中瀏覽如此長的 URL 成為一項乏味的任務,因為使用者必須手動滾動才能到達末尾。為了緩解這種不便,開發人員尋求一種允許他們直接「滾動」到 URL 最右側的解決方案。這消除了手動滾動的需要,並提供對 URL 末尾的立即存取。
答案:
幸運的是,HTMLInputElement.setSelectionRange() 方法提供了一個解決方案這個挑戰。透過在輸入欄位上明確設定 focus() 並隨後將 SelectionRange() 設定為輸入值的長度,遊標會自動定位在 URL 的末端。
實作:
<code class="javascript">var foo = document.getElementById("foo"); foo.value = "http://stackoverflow.com/questions/1962168/scroll-to-the-very-right-of-a-long-text-input"; foo.focus(); foo.setSelectionRange(foo.value.length, foo.value.length);</code>
注意:
需要注意的是,此解決方案適用於除IE6- 8 和Opera 以外的所有瀏覽器。在這些特定的瀏覽器中,當輸入失去焦點時,遊標可能會回到欄位的開頭。
以上是如何滾動到 HTML 中長文字輸入的末尾?的詳細內容。更多資訊請關注PHP中文網其他相關文章!