发表新帖
发表新帖

How to detect a textbox's content has changed

后端 未结
关注
15 1873
猫巷女王i
猫巷女王i 2020-11-22 16:10

I want to detect whenever a textbox\'s content has changed. I can use the keyup method, but that will also detect keystrokes which do not generate letters, like the arrow ke

相关标签:
15条回答
  • 野的像风
    2020-11-22 16:10 
    $(document).on('input','#mytxtBox',function () { 
 console.log($('#mytxtBox').val());
});

    You can use 'input' event to detect the content change in the textbox. Don't use 'live' to bind the event as it is deprecated in Jquery-1.7, So make use of 'on'.

    0 讨论(0)
  • 眼角桃花
    2020-11-22 16:10

    Something like this should work, mainly because focus and focusout would end up with two separate values. I'm using data here because it stores values in the element but doesn't touch the DOM. It is also an easy way to store the value connected to its element. You could just as easily use a higher-scoped variable.

    var changed = false;

$('textbox').on('focus', function(e) {
    $(this).data('current-val', $(this).text();
});

$('textbox').on('focusout', function(e) {
    if ($(this).data('current-val') != $(this).text())
        changed = true;
    }
    console.log('Changed Result', changed);
}
    0 讨论(0)
  • 情深已故
    2020-11-22 16:13

    Start observing 'input' event instead of 'change'.

    jQuery('#some_text_box').on('input', function() {
    // do your stuff
});

    ...which is nice and clean, but may be extended further to:

    jQuery('#some_text_box').on('input propertychange paste', function() {
    // do your stuff
});
    0 讨论(0)
  • 情歌与酒
    2020-11-22 16:13

    Use closures to remember what was the text in the checkbox before the key stroke and check whether this has changed.

    Yep. You don't have to use closures necessarily, but you will need to remember the old value and compare it to the new.

    However! This still won't catch every change, because there a ways of editing textbox content that do not involve any keypress. For example selecting a range of text then right-click-cut. Or dragging it. Or dropping text from another app into the textbox. Or changing a word via the browser's spell-check. Or...

    So if you must detect every change, you have to poll for it. You could window.setInterval to check the field against its previous value every (say) second. You could also wire onkeyup to the same function so that changes that are caused by keypresses are reflected quicker.

    Cumbersome? Yes. But it's that or just do it the normal HTML onchange way and don't try to instant-update.

    0 讨论(0)
  • 时光取名叫无心
    2020-11-22 16:14

    There's a complete working example here.

    <html>
<title>jQuery Summing</title>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> </script>
$(document).ready(function() {
$('.calc').on('input', function() {
var t1 = document.getElementById('txt1');
var t2 = document.getElementById('txt2');
var tot=0;
if (parseInt(t1.value))
tot += parseInt(t1.value);
if (parseInt(t2.value))
tot += parseInt(t2.value);
document.getElementById('txt3').value = tot;
});
});
</script>
</head>
<body>
<input type='text' class='calc' id='txt1'>
<input type='text' class='calc' id='txt2'>
<input type='text' id='txt3' readonly>
</body>
</html>
    0 讨论(0)
  • 不知归路
    2020-11-22 16:19

    I assume that you are looking to do something interactive when the textbox changes (i.e. retrieve some data via ajax). I was looking for this same functionality. I know using a global isn't the most robust or elegant solution, but that is what I went with. Here is an example:

    var searchValue = $('#Search').val();
$(function () {
    setTimeout(checkSearchChanged, 0.1);
});

function checkSearchChanged() {
    var currentValue = $('#Search').val();
    if ((currentValue) && currentValue != searchValue && currentValue != '') {
        searchValue = $('#Search').val();
        $('#submit').click();
    }
    else {
        setTimeout(checkSearchChanged, 0.1);
    }
}

    One key thing to note here is that I am using setTimeout and not setInterval since I don't want to send multiple requests at the same time. This ensures that the timer "stops" when the form is submitted and "starts" when the request is complete. I do this by calling checkSearchChanged when my ajax call completes. Obviously you could expand this to check for minimum length, etc.

    In my case, I am using ASP.Net MVC so you can see how to tie this in with MVC Ajax as well in the following post:

    http://geekswithblogs.net/DougLampe/archive/2010/12/21/simple-interactive-search-with-jquery-and-asp.net-mvc.aspx

    0 讨论(0)
 看不清?
提交回复
热议问题