Maison > Article > interface Web > Partager la solution à l'échec du clavier mobile jquery

Partager la solution à l'échec du clavier mobile jquery

黄舟original: 2017-06-27 14:23:192544parcourir

Dans un projet de version à écran tactile sur lequel j'ai récemment travaillé, j'ai rencontré le problème de surveillance de la valeur d'entrée en utilisant keyup, ce n'était aucun problème d'appuyer sur les autres touches du clavier. téléphone, mais la clé de suppression n'a pas pu être surveillée. Recherchez la solution ci-dessous en ligne.

(Texte original de : http://blog.csdn.net/kongjiea/article/details/40186121)

Basé sur un champ de recherche sur l'utilisateur La valeur d'entrée est récupérée en temps réel. Keyup vient naturellement à l'esprit au début. Dans l'état Pinyin , il n'y a pas de problème

Question 1 : <.> Passer à la méthode de saisie chinoise , un problème est survenu, l'événement keyup ne fonctionnait pas correctement, puis j'ai cherché en ligne et j'ai trouvé l'idée,

Question 2 : Lorsque la plateforme publique WeChat a été développée , le client a demandé « lors de la saisie du contenu dans la zone de saisie, un bouton d'effacement sera affiché derrière la zone de saisie pour effacer le contenu dans la zone de saisie ". Lors de l'utilisation de l'événement "keyup", certains événements keyup se produiront sous la méthode de saisie chinoise. Invalide,

Méthode 1 : enregistrez principalement l'événement focus pour le champ de recherche et récupérez-le à intervalles réguliers, publiez le code

<script language="javascript" type="text/javascript" src="jquery.js"></script>  
    <script>  
  
    $(function () {  
        $(&#39;#wd&#39;).bind(&#39;focus&#39;,filter_time);  
    })  
  
    var str = &#39;&#39;;  
    var now = &#39;&#39;  
    filter_time = function(){  
        var time = setInterval(filter_staff_from_exist, 100);  
        $(this).bind(&#39;blur&#39;,function(){  
            clearInterval(time);  
        });  
    };  
  
    filter_staff_from_exist = function(){  
        now = $.trim($(&#39;#wd&#39;).val());  
        if (now != &#39;&#39; && now != str) {  
            console.log(now);  
        }  
        str = now;  
    }  
    </script>

Méthode 2 : utilisez les événements d'entrée et de changement de propriété pour résoudre le problème,

Je ne peux utiliser que la méthode de liaison dom2 pour tester Tel que document.getElementById('box').addEventListener('input',function(){.. .dosomething...},false);

html>  
<head>  
<script type="text/javascript" src="http://www.zlovezl.cn/static/js/jquery-1.4.2.min.js"></script>  
</head>  
<body>  
    <p>  
        使用oninput以及onpropertychange事件检测文本框内容：  
    </p>  
    <p>  
        <input type="text" name="inputorp_i" id="inputorp_i" autocomplete="off"/>  
        <span id="inputorp_s"></span>  
        <script type="text/javascript">  
            //先判断浏览器是不是万恶的IE，没办法，写的东西也有IE使用者  
            var bind_name = &#39;input&#39;;  
            if (navigator.userAgent.indexOf("MSIE") != -1){  
                bind_name = &#39;propertychange&#39;;  
            }  
            $(&#39;#inputorp_i&#39;).bind(bind_name, function(){  
                $(&#39;#inputorp_s&#39;).text($(this).val());  
            })  
        </script>  
    </p>  
</body>  
</html>

Mais il y a aussi des gens. On dit que vous pouvez vous lier en utilisant la méthode jq, comme :

$(&#39;#input&#39;).bind(&#39;input propertychange&#39;, function() {  
                alert("....")  
            });

ou natif :

<script type="text/javascript">  
// Firefox, Google Chrome, Opera, Safari, Internet Explorer from version 9  
function OnInput (event) {  
    alert ("The new content: " + event.target.value);  
}  
// Internet Explorer  
function OnPropChanged (event) {  
    if (event.propertyName.toLowerCase () == "value") {  
        alert ("The new content: " + event.srcElement.value);  
    }  
}   
</script>  
  
<body>  
    <input type="text" oninput="OnInput (event)" onpropertychange="OnPropChanged (event)" value="Text field" />  
</body>

La dernière chose à noter est : oninput Les deux événements, onpropertychange et onpropertychange, ont un petit bug dans IE9, c'est-à-dire qu'ils ne seront pas déclenchés lors de la suppression de contenu via les commandes couper et supprimer du menu contextuel. Cependant, les autres versions d'IE sont normales, et c'est le cas. pas très bonne solution pour le moment. Cependant, oninput & onpropertychange restent le meilleur moyen de surveiller les changements de valeur de la zone de saisie.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Pourquoi l'événement keyup n'est-il pas exécuté dans jquery ?Article suivant：Pourquoi l'événement keyup n'est-il pas exécuté dans jquery ?

Articles Liés

Voir plus