Question

我使用此代码监控输入字段：

$('.qty-input').change(function(event) {
   var qty = $(this).val();
   var price = $(this).data('price');
   var prod = $(this).attr('name');
   var total = qty*price;
   $('#total'+prod).html(total);
});

但是当我离开输入框时它似乎才起作用。如何实时跟踪输入？

Answer 1

尝试其他事件，例如：

$('.qty-input').on( 'blur change click dblclick error focus focusin focusout hover keydown keypress keyup load mousedown mouseenter mouseleave mousemove mouseout mouseover mouseup resize scroll select submit', function(event){
    //alert(event.type);
    //your code
});

Answer 2

使用input事件代替change事件，不要忘记将字符串解析为数字。

$('.qty-input').on('input', function(event) {
   var qty = +$(this).val();
   var price = +$(this).data('price');
   var prod = $(this).attr('name');
   var total = qty*price;
   $('#total'+prod).html(total);
});

注意：

当用户粘贴内容到输入元素时，输入事件事件会被捕获。

$('.qty-input').on('input', function(event) { var qty = +$(this).val(); var price = +$(this).data('price'); var prod = $(this).attr('name'); var total = qty*price; $('#total'+prod).html(total); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> BREAD -- Qty: <input type="text" name="bread" data-price="2" class="qty-input" /> Total: <span id="totalbread"></span><br> MILK -- Qty: <input type="text" name="milk" data-price="12.35" class="qty-input"/> Total: <span id="totalmilk"></span><br>

Answer 3

这是一个小提琴：http://jsfiddle.net/175s3st5/

使用以下代码：

<input type="text" id="myText" />

<div id="output" style="border: 1px solid black"></div>

    var textBox = $("#myText");
    var output = $("#output");

    $(textBox).on('keyup', function(){
    $(output).html($(this).val());
    })

这是“keyup”事件的一个例子，你可以使用很多其他事件。

以下是一些文档：

键盘事件：http://api.jquery.com/category/events/keyboard-events/

鼠标事件：http://api.jquery.com/category/events/mouse-events/

浏览其他人并玩弄示例。

jQuery Monitor文本输入实时

3 个答案: