我有這個代碼：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<form name="myform">
Your number:
<input type="number" name="inputbox" id='textBox' value="" />
<input type="button" name="button" class="member" value="Click me!" />
<div class='box1' style='border:1px solid #333333;margin-top:15px;width:33.33%;height:50%;padding-left:15px;padding-right:15px;'>
<h3>
0
</h3>
<p>
Valor
</p>
</div>
</form>
<script>
$(function() {
$('.member').click(function() {
var answer = $("#textBox").val();
if (answer <= 20) {
$('.box1').css('background-color', 'red').find('h3').html(answer);
} else if (answer <= 50) {
$('.box1').css('background-color', 'orange').find('h3').html(answer);
} else {
$('.box1').css('background-color', 'steelblue').find('h3').html(answer);
}
});
});
</script>有用。但是，我希望不需要單擊以顯示該值。也就是說，當我在“您的號碼”欄位中輸入數字時，它將在 div 內更新。
例如，如果我輸入 75，該值會自動出現，無需按任何按鈕。
我試過洗掉：
$('.member').click(function() {...})
但不要作業。
uj5u.com熱心網友回復：
您需要添加on input到文本框中，例如，
$('#textBox').on("input", function(){ ... });
分叉的作業示例：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<form name="myform">
Your number:
<input type="number" name="inputbox" id='textBox' value="" />
<input type="button" name="button" class="member" value="Click me!" />
<div class='box1' style='border:1px solid #333333;margin-top:15px;width:33.33%;height:50%;padding-left:15px;padding-right:15px;'>
<h3>
0
</h3>
<p>
Valor
</p>
</div>
</form>
<script>
$(function() {
$('#textBox').on("input", function() {
var answer = $("#textBox").val();
if (answer <= 20) {
$('.box1').css('background-color', 'red').find('h3').html(answer);
} else if (answer <= 50) {
$('.box1').css('background-color', 'orange').find('h3').html(answer);
} else {
$('.box1').css('background-color', 'steelblue').find('h3').html(answer);
}
});
});
</script>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/433728.html
標籤：javascript html jQuery
上一篇：選中多個單選框生成一個值