162

レンジ スライダーを使用する Web サイトを作成しています (Webkit ブラウザーのみをサポートしていることはわかっています)。

私はそれを完全に統合し、正常に動作します。textboxしかし、現在のスライド値を表示するために a を使用したいと思います。

つまり、最初にスライダーの値が 5 の場合、テキスト ボックスでは 5 として表示され、スライドするとテキスト ボックスの値が変化するはずです。

またはのみを使用してこれを行うことはできますCSSかhtml。避けたいJQuery。出来ますか？

4

12 に答える 12

256

別の JavaScript コードを使用せずに解決策を探している人向け。JavaScript または jquery 関数を記述しないと、簡単な解決策はほとんどありません。

<input type="range" value="24" min="1" max="100" oninput="this.nextElementSibling.value = this.value">
<output>24</output>

JsFiddle デモ

テキスト ボックスに値を表示する場合は、出力を入力に変更するだけです。

注意点: html 内に記述された Javascript のままです。以下のようなものを js に記述して、同様のことを行うことができます。

 document.registrationForm.ageInputId.oninput = function(){
    document.registrationForm.ageOutputId.value = document.registrationForm.ageInputId.value;
 }

要素の ID の代わりに名前を使用することもできます。どちらも最新のブラウザーでサポートされています。

于 2013-09-21T18:52:05.880 に答える
139

これは、jquery を直接使用するのではなく、javascript を使用します。始めるのに役立つかもしれません。

function updateTextInput(val) {
          document.getElementById('textInput').value=val; 
        }
<input type="range" name="rangeInput" min="0" max="100" onchange="updateTextInput(this.value);">
<input type="text" id="textInput" value="">

于 2012-04-04T04:19:19.937 に答える
39

さらに良い方法は、フォーム全体ではなく入力自体で入力イベントをキャッチすることです（パフォーマンスに関して）：

<input type="range" id="rangeInput" name="rangeInput" min="0" max="20" value="0"
       oninput="amount.value=rangeInput.value">                                                       

<output id="amount" name="amount" for="rangeInput">0</output>

ここにフィドルがあります（idライアンのコメントに従って追加されています）。

于 2014-01-19T11:06:14.697 に答える
-1 

<form name="registrationForm">
    <input type="range" name="ageInputName" id="ageInputId" value="24" min="1" max="10" onchange="getvalor(this.value);" oninput="ageOutputId.value = ageInputId.value">
    <input type="text" name="ageOutputName" id="ageOutputId"></input>
</form>

于 2016-10-09T17:11:07.423 に答える