jQuery textchanged 绑定发生在不相关的按键上

Question

这是我的代码：

var tourl;
$(document).ready(function(){
    $("input#url").bind("textchange",showPage);
    $("input#url").bind("textchange",toggleButtons);
    $("input#url").focus();


    $("form#surlform").submit(function(){
        var url = $("input#url").val(); 
        $.get("api/create.php?a=&url=" + url, function(data) {
                $("input#url").val(data);
                $("input#url").select();
                $('#button').hide();
                $('#hbutton').show();
                tourl = data;
                $('#hbutton').bind('click', function() {
                    window.location = tourl + "-";
                });
            });

        return false;
    });
    });

$(document).click(function(){
    showPage();
});
$(document).mousemove(function(){
    showPage();
});
function toggleButtons() {
    $('#hbutton').hide();
    $('#button').show();
}

如您所见，数据被输入到表单中，jQuery 停止正常的表单提交，而是联系 API。在来自 API 的响应中，它将文本框文本更改为响应并突出显示它。然后它将提交按钮更改为链接到 API 输出的按钮（它是一个 URL）。我正在使用绑定到 textchange 事件，然后在更改表单字段中的文本时将按钮更改回来。

但是，它不会在字段中的文本实际更改时触发，而是在任何按键时触发。例如，如果我想复制输出，我会使用 Ctrl+C 来执行此操作，但是当我这样做时，它会将其计为正在更改的文本并将按钮更改回来。

有什么方法可以让这个只在框内的文本实际改变时触发？

提前致谢。

Answer 1

我会使用change 事件而不是使用textchange 事件（并且不明白为什么使用bind...）：

$(document).ready(function(){
    $("input#url").change(function(){
        showPage();
        toggleButtons();
    });
    $("input#url").focus();
    ...
});

Answer 2

将最后的文本保存到 var 中并与实际文本进行比较，如下所示：

var lastText = jQuery('parentElement element').val();
jQuery('parentElement').on('keyup', 'element', function() {
    if(jQuery(this).val() !== lastText) {
        // do what do you want
    }

    lastText = jQuery(this).val();
});

Demo