首頁 > web前端 > css教學 > 如何滾動到 HTML 中長文字輸入的末尾?

如何滾動到 HTML 中長文字輸入的末尾?

DDD
發布: 2024-10-25 07:49:02
原創
337 人瀏覽過

How to Scroll to the End of a Long Text Input in HTML?

捲動到長文字輸入的末尾:詳細的解決方案

在 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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板