javascript - 输入变化时如何动态改变div的内容？

Question

<input type="text" class="input-text qty" title="Qty" value="1" maxlength="12" id="qty" name="qty" />
<div id="qtyvalue"><div>

页面上有一个输入文本框。我正在使用 Javascript 将 qtyvalue 输出到以下 div。

var qty =document.getElementById('qty').value;
document.getElementById('qtyvalue').innerHTML = qty;

现在，如果用户在文本框中输入数字，qtyvalue 的值会相应改变，我不需要刷新页面。我应该如何更改代码？

Answer 1

将其包装在keyup事件中：

var input = document.getElementById('qty'); 
input.onkeyup = function() {
    document.getElementById('qtyvalue').innerHTML = input.value;    
}

但是您也应该考虑在其他事件上添加相同的操作：change, paste, input。

这里的工作示例

Answer 2

<input type="text" onchange="javascript:callMeOnChange()" class="input-text qty" title="Qty" value="1" maxlength="12" id="qty" name="qty" />
<div id="qtyvalue"><div>
<script>
function callMeOnChange()
{
$('#qtyvalue').value=$('#qty').val();
}
</script>

Answer 3

在输入字段内容更改时更改按钮状态

<script type="text/javascript">
        $('#submit').attr('disabled',true);//
        $('#captchaStatusTrue').attr('hidden',true);//
        $('#captchaStatusFalse').removeAttr('hidden');//

      document.getElementById("status").onchange = function(){ 
        var status = document.getElementById("status").value;
        var falses = "false";

       if(status == falses){//
                $('#submit').attr('disabled',true);//
                $('#captchaStatusTrue').attr('hidden',true);//
                $('#captchaStatusFalse').removeAttr('hidden');//
            }
            else{//
                   $('#submit').removeAttr('disabled');//
                   $('#captchaStatusFalse').attr('hidden',true);//
                   $('#captchaStatusTrue').removeAttr('hidden');//

            }//
      };//
    </script>