web-dev-qa-db-fra.com

jQuery - lors du changement du texte saisi

J'essaie de créer une fonction qui sera exécutée lorsque la valeur d'un text input field sera modifiée. La valeur du champ change lorsqu'on clique sur une cellule du tableau, pas sur keyup, ni coller. J'ai essayé comme ça:

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

Et j'ai le champ de texte:

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

mais ça ne marche pas. De l'aide? 

jqueryonchangetextinput
27
Marko Cakic

Cela provient d'un commentaire sur la page de documentation de jQuery:

Dans les navigateurs antérieurs à HTML5, "keyup" est certainement ce que vous recherchez.

En HTML5, il y a un nouvel événement, "input", qui se comporte exactement comme vous semblez penser que "le changement" aurait dû se comporter - en ce sens qu'il se déclenche dès qu'une touche est enfoncée pour entrer des informations dans un formulaire.

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

25
aldux

Il me semble que vous mettez à jour la valeur du champ de texte en javascript. L'événement onchange sera déclenché uniquement lorsque vous saisissez des données et sortez du champ de texte. 

Une solution de contournement consiste à déclencher l'événement de changement de zone de texte lors de la modification de la valeur de la zone de texte à partir du script. Voir ci-dessous,

$("#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

Cette technique fonctionne pour moi:

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

Notez que selon ce document JQuery , "sur" est recommandé plutôt que de se lier aux versions plus récentes.

9
solublefish

Cela a fonctionné pour moi

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

La documentation de jQuery indique ceci: "Il est également affiché [le résultat de l'exécution du gestionnaire] si vous modifiez le texte dans le champ, puis cliquez au loin. Si le champ perd le focus sans que le contenu ait changé, l'événement n'est pas déclenché".

Essayez les événements keyup et keydown, comme ceci:

$("#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

Je me demandais récemment pourquoi mon code ne fonctionnait pas. J'ai alors réalisé que je devais configurer les gestionnaires d'événements dès que le document était chargé. Sinon, lorsque le navigateur charge le code ligne par ligne, il charge le code JavaScript mais vous avez l'élément pour lui assigner le gestionnaire d'événement . avec votre exemple, il devrait être comme ceci:

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

Cela fonctionne pour moi. Peut-être un problème de navigateur tel que mentionné, ou peut-être que jQuery n’est pas enregistré correctement, ou peut-être que le vrai problème est plus compliqué (que vous ayez créé une version plus simple pour le demander). PS - a dû cliquer en dehors de la zone de texte pour le déclencher.

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

0
Todd Davis

Cela fonctionne pour moi sur tous les navigateurs et Jquery <= v1.10

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

ou comme vous semblez vouloir

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

L'événement de modification du champ de saisie de la zone de texte se déclenche comme prévu; l'événement jQuery .Change ne fonctionne correctement que sur les navigateurs pris en charge par HTML5.

0
Pierre

Essaye ça,

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