web-dev-qa-db-ja.com

jQuery-入力テキストの変更時

text input fieldの値が変更されたときに実行される関数を作成しようとしています。フィールドの値は、keyupや貼り付けではなく、テーブルセルをクリックすると変化します。私はこのようにしてみました：

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

そして、私はテキストフィールドを持っています：

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

しかし、それは機能していません。助けがありますか？

jqueryonchangetextinput
27
Marko Cakic

これは、jQueryドキュメントページのコメントからのものです。

古い、HTML5以前のブラウザでは、「キーアップ」が間違いなくあなたが探しているものです。

HTML5には、「入力」という新しいイベントがあります。これは、「変更」が動作するはずであると思われるように動作します。フォームに情報を入力するためにキーが押されるとすぐに起動します。

$（ 'element'）。bind（ 'input'、function）;

27
aldux

あなたはjavascriptのテキストフィールドの値を更新しているように思えます。 onchangeイベントは、データをキー入力し、テキストフィールドからタブアウトしたときにのみトリガーされます。

1つの回避策は、スクリプトからテキストボックスの値を変更するときにテキストボックス変更イベントをトリガーすることです。下記参照、

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


$('<tab_cell>').click (function () {
   $('#kat')
      .val($(this).text()) //updating the value of the textbox 
      .change();           //trigger change event.
});
9
Selvakumar Arumugam

このテクニックは私のために働いています：

$('#myInputFieldId').bind('input',function(){ 
               alert("Hello");
    });

this JQuery doc によると、新しいバージョンでバインドするのではなく、「on」をお勧めします。

9
solublefish

これは私のために働いた

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 
    }

});
5
M S

JQueryのドキュメントには、「フィールドのテキストを変更してからクリックすると[ハンドラーの実行結果]も表示されます。ただし、内容が変更されずにフィールドがフォーカスを失うと、イベントはトリガーされません。」.

次のようなキーアップイベントとキーダウンイベントを試してください。

$("#kat").keydown(function(){ 
   alert("Hello");
});
4
Adauto
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>
3
priyanka

私は最近、私のコードがなぜ機能しないのか疑問に思っていましたが、ドキュメントが読み込まれるとすぐにイベントハンドラを設定する必要があることに気付きました。そうしないと、ブラウザがコードを行ごとに読み込むときにJavaScriptを読み込みますが、まだイベントハンドラを割り当てる要素があります。あなたの例では、次のようになります：

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

それは私のために働いています。前述のブラウザの問題であるか、jQueryが適切に登録されていないか、実際の問題はより複雑です（これを確認するために簡単なバージョンを作成したため）。 PS-テキストボックスをクリックして起動する必要がありました。

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

0
Todd Davis

これはすべてのブラウザで動作し、Jquery <= v1.10

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

またはあなたが望むように

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

テキストボックスの入力フィールド変更イベントは期待どおりに発生します。jQuery.Changeイベントはhtml5がサポートされているブラウザーでのみ正しく機能します

0
Pierre

これを試して、

$('#kat').on('input',function(e){
 alert('Hello')
});
0
Rashad Annara