首頁 > web前端 > css教學 > 如何顯示 HTML5 範圍輸入控制項的值?

如何顯示 HTML5 範圍輸入控制項的值?

Susan Sarandon
發布: 2024-11-15 08:24:03
原創
783 人瀏覽過

How to Display the Value of an HTML5 Range Input Control?

如何在 HTML5 的輸入範圍控制項中顯示範圍值?

使用 HTML5,您可以建立一個範圍滑桿,其值可以輕鬆顯示在文字方塊中。這對於向用戶提供即時回饋特別有用。這是一個利用HTML5 原生功能而不需要JavaScript 或jQuery 的解決方案:

<input type="range" value="24" min="1" max="100" oninput="this.nextElementSibling.value = this.value">
<output>24</output>
登入後複製

以下是程式碼細分:

  • min 和 max:定義滑桿的最小值和最大值。
  • oninput:每次滑桿值發生變化時都會觸發此事件監聽器。
  • nextElementSibling:用於存取輸出元素,它是輸入範圍的相鄰同級元素。
  • this.value:表示範圍輸入的目前值。
  • < ;output>:此元素顯示範圍輸入的值。

當您滑動範圍輸入時,會觸發 oninput 事件,更新輸出元素的值以反映目前滑動位置。這提供了一個用戶友好的介面,其中滑塊的確切值始終可見。

以上是如何顯示 HTML5 範圍輸入控制項的值?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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