Question

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

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

我不知道该怎么做，所以有人请指出我正确的方向。如果已经回答，请告诉我。提前谢谢。

Answer 1

input元素有一个可以使用的onchange（或onkeyup）事件。您可以在设置目标div的innertext的事件中执行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>

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

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

从输入中回显文本

2 个答案: