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

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