來自輸入的回顯文本

我正在嘗試製作一個基本的邊框半徑生成器。我有一個輸入字段的用戶在他們選擇的號碼鍵入如下圖所示：來自輸入的回顯文本

<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>

我不知道該怎麼做，所以有人可以請我指出正確的方向。請讓我知道這是否已經回答。提前致謝。

來源

2012-06-04 Lodder

http://www.w3.org/wiki/Creating_and_modifying_HTML – Quentin

得到它到底工作：

<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-04 14:54:22 Lodder

輸入元素有一個你可以使用的onchange（或onkeyup）事件。你可以在該事件中執行javascript來設置目標div的內文。驗證後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-04 14:33:46

得到它到底工作。謝謝你的貢獻和想法。 – Lodder

來自輸入的回顯文本

回答

相關問題