首頁 > web前端 > css教學 > 如何在不使用文字區域的情況下捲動到文字輸入的最右側?

如何在不使用文字區域的情況下捲動到文字輸入的最右側?

DDD
發布: 2024-10-25 02:58:29
原創
885 人瀏覽過

How to Scroll to the Far Right of a Text Input Without Using a Textarea?

滾動到大量文字輸入的最右側

在文字欄位中顯示冗長URL 的圖像選擇器等場景中,可視化完整URL 變得至關重要以增強理解力。但是,由於預設視圖僅顯示初始部分,這可能會受到限制。有沒有一種技巧可以確保 URL 結尾可見,而不依賴文字區域?

不包括IE6-8 和Opera 的瀏覽器

適用於大多數瀏覽器的解決方案涉及將HTMLInputElement.setSelectionRange() 與focus() 結合使用,將文本選擇設定為輸入值的末尾。雖然這實際上會向右滾動,但需要注意的是,失去焦點後視圖會恢復到開始位置。

<code class="js">const 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>
登入後複製
<code class="html"><input id="foo"></code>
登入後複製

以上是如何在不使用文字區域的情況下捲動到文字輸入的最右側?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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