从输入回显文本答案

【问题标题】：echo text from input从输入回显文本
【发布时间】：2012-06-08 14:46:40
【问题描述】：

我正在尝试制作一个基本的边界半径生成器。我有一个输入字段供用户输入他们选择的数字，如下所示：

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

我不知道该怎么做，所以有人可以指点我正确的方向。也请让我知道这是否已经得到回答。提前致谢。

【问题讨论】：

w3.org/wiki/Creating_and_modifying_HTML

标签： javascript code-generation

【解决方案1】：

输入元素有一个可以使用的 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>

一个更优雅的解决方案为 .. 使用单独的跨度，而不是替换整个文本，但出于演示目的，上述内容就足够了。

【讨论】：

最后让它工作了。感谢您的贡献和想法。

【解决方案2】：

最后搞定了：

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

【讨论】：