эхо-текст с ввода

Question

Я пытаюсь создать базовый генератор радиуса границы. У меня есть поле ввода для пользователя введите номер своего выбора, как показано ниже:

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

Я тогда выходной область, где я хочу, номер они набрали, чтобы предстать перед «рх»

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

Я не уверен, как это сделать, поэтому кто-то может указать мне в правильном направлении. Пожалуйста, дайте мне знать, если об этом уже был дан ответ. Заранее спасибо.

Answer 1

Понял работает в конце концов:

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

Answer 2

Элемент ввода имеет событие 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> 

Немного более элегантное решение использует отдельный промежуток для .. вместо того, чтобы заменить весь текст, но для демонстрационных целей выше должно быть достаточно.