0

基本的な境界半径ジェネレーターを作成しようとしています。以下に示すように、ユーザーが選択した番号を入力するための入力フィールドがあります。

<label>Border Radius:</label>
<input name="border-radius" class="jj_input" type="text" size="2" />

次に、入力した数字を「px」の前に表示する出力領域があります

<div class="yourcode">
     border-radius: *NUMBER_APPEARS_HERE*px;
</div>

どうすればいいのかわからないので、誰かが私を正しい方向に向けてください。これがすでに回答されているかどうかも教えてください。前もって感謝します。

4

2 に答える 2

0

最終的にはうまくいきました：

<label>Border Radius:</label>
<input name="border-radius" id="jj_input" class="jj_input" type="text" size="2" value='' onkeyup='changeRadius()' />

<div class="yourcode">
    border-radius: <span id="radius"></span>px;
</div>

<script type="text/javascript">
   function changeRadius(){
        var jj_input = document.getElementById('jj_input').value;
        document.getElementById('radius').innerHTML = jj_input;
   }
</script>
于 2012-06-04T14:54:22.110 に答える
0

入力要素には、使用できる onchange (または onkeyup) イベントがあります。ターゲット div の内部テキストを設定するイベント内で JavaScript を実行できます。Onchange は検証後に発生します (ほとんどの場合、これはユーザーがボックスを離れたときを意味します)。入力の直後に変更したい場合で、キーボード入力のみが許可されている場合は、keydown/up イベントを使用できます。以下の例では onkeyup が使用されています

<label>Border Radius:</label>

<input name="border-radius" class="jj_input" type="text" size="2" onkeyup = "document.getElementById('displaydiv').innerText = 'border-radius: '  + this.value + ' px'" />

 <div class="yourcode" id="displaydiv">
 border-radius: ..px;
 </div>

もう少し洗練されたソリューションでは、テキスト全体を置き換える代わりに .. に別のスパンを使用しますが、デモの目的では上記で十分です。

于 2012-06-04T14:33:46.550 に答える