logo标签列表

jQuery - 当输入文本改变时

jqueryonchangetextinput
29

我正在尝试编写一个函数，该函数将在更改了文本输入字段的值时执行。该字段的值在单击表格单元格时更改，而不是在keyup或粘贴时更改。我像这样尝试过：

$("#kat").change(function(){ 
    alert("Hello");
});

我有一个文本字段：

<input type="text" id="kat" value="0"/>

但它没有起作用。有什么帮助吗？

1
听起来你想要附加到那个表格单元格的点击事件。 - Tejs
1
当单击表格单元格时，您所说的值会更改是什么意思？标记在哪里？这难道不意味着单击事件处理程序是正确的方法吗？ - adeneo
我想通过将所点击链接的值放入文本输入字段中来减少代码量，然后在更改时执行一个函数，但最终我为每个点击事件（22个事件）编写了一个函数... - Marko Cakic
10个回答
28

这段内容来自jQuery文档页面的评论:

在旧版、HTML5之前的浏览器中，“keyup”事件是你要寻找的。

在HTML5中，有一个新事件“input”，它的行为方式与你认为“change”应该表现的方式完全相同，即只要按下键盘输入表单信息，它就会触发。

$('element').bind('input',function);

9

看起来您正在使用JavaScript更新文本字段的值。只有在输入数据并离开文本字段时，onchange事件才会触发。

一种解决方法是在从脚本修改文本框值时触发文本框更改事件。请参见以下内容：

$("#kat").change(function(){ 
    alert("Hello");
});


$('<tab_cell>').click (function () {
   $('#kat')
      .val($(this).text()) //updating the value of the textbox 
      .change();           //trigger change event.
});
我想通过将所点击链接的值放入文本输入字段中来减少代码量，然后在更改时执行一个函数，但最终我为每个点击事件（22个事件）编写了一个函数... - Marko Cakic
@MarkoCakic，您的问题不够清晰，请发布相关的HTML和JS代码以便我们提供帮助。 - Selvakumar Arumugam
这是一种非常酷的事件触发方式，可以使用链式调用。谢谢！ - film42
9
这项技术对我很有效：
$('#myInputFieldId').bind('input',function(){ 
               alert("Hello");
    });

请注意，根据JQuery文档，较新版本中建议使用"on"而不是"bind"。

5
这对我很有帮助。
var change_temp = "";
$('#url_key').bind('keydown keyup',function(e){
    if(e.type == "keydown"){
        change_temp = $(this).val();
        return;
    }
    if($(this).val() != change_temp){
        // add the code to on change here 
    }

});
4

jQuery文档中提到：“如果您更改字段中的文本，然后单击离开，也会显示[处理程序执行结果]。但是，如果字段失去焦点而内容没有更改，则不触发事件。“。

尝试使用keyup和keydown事件，像这样：

$("#kat").keydown(function(){ 
   alert("Hello");
});
3
function search() {
        var query_value = $('input#search').val();
        $('b#search-string').html(query_value);
        if(query_value !== ''){
            $.ajax({
                type: "POST",
                url: "search.php",
                data: { query: query_value },
                cache: false,
                success: function(html){
                    //alert(html);
                    $("ul#results").html(html);
                }
            });
        }return false;    
    }

    $("input#search").live("keyup", function(e) {
        clearTimeout($.data(this, 'timer'));

        var search_string = $(this).val();

        if (search_string == '') {
            $("ul#results").fadeOut();
            $('h4#results-text').fadeOut();
        }else{
            $("ul#results").fadeIn();
            $('h4#results-text').fadeIn();
            $(this).data('timer', setTimeout(search, 100));
        };
    });


and the html 
<input id="search" style="height:36px; font-size:13px;" type="text" class="form-control" placeholder="Enter Mobile Number or Email"  value="<?php echo stripcslashes($_REQUEST["string"]); ?>" name="string" />
        <h4 id="results-text">Showing results for: <b id="search-string">Array</b></h4>
        <ul id="results"></ul>
1

最近我在思考为什么我的代码无法工作，后来我意识到，我需要在文档加载完成后立即设置事件处理程序，否则当浏览器逐行加载代码时，它会加载JavaScript，但还没有元素将事件处理程序分配给它。 按照您的示例，应该像这样：

$(document).ready(function(){
     $("#kat").change(function(){ 
         alert("Hello");
     });
});
0

这个对我来说是有效的。可能是浏览器问题，如前所述，也可能是jQuery没有正确注册，或者可能真正的问题更加复杂（您制作了一个更简单的版本来提出此问题）。顺便说一句-确实需要点击文本框以使其生效。

http://jsfiddle.net/toddhd/Qt7fH/

0

这对我在所有浏览器和Jquery <= v1.10上都有效。

$('#kat').on('keyup', function () {
    alert("Hello");
});

或者，正如你所希望的那样

$('#kat').on('click', function () {
    alert("Hello");
});

文本框输入字段更改事件会按照您的预期触发，但 jQuery 的 .Change 事件只在支持 HTML5 的浏览器上才能正常工作。

0

试试这个，

$('#kat').on('input',function(e){
 alert('Hello')
});
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接