suchen

Heim >Web-Frontend >js-Tutorial >Teilen Sie die Lösung für den Fehler bei der Tastenbetätigung der mobilen JQuery-Tastatur

Teilen Sie die Lösung für den Fehler bei der Tastenbetätigung der mobilen JQuery-Tastatur

黄舟
黄舟Original
2017-06-27 14:23:192658Durchsuche

Bei einem kürzlich durchgeführten Touchscreen-Versionsprojekt bin ich auf das Problem gestoßen, den Eingabewert mithilfe von Keyup zu überwachen. Es ist kein Problem, die - und andere -Tasten auf der Tastatur des Mobiltelefons zu drücken. aber der Löschschlüssel kann nicht überwacht werden. Finden Sie die Lösung unten online.

(Originaltext von: http://blog.csdn.net/kongjiea/article/details/40186121)

Suchfeldbasiert Auf den ersten Blick fällt mir der Eingabewert in Echtzeit ein. Im Pinyin--Zustand gibt es kein Problem

. Wechseln Sie zur chinesischen Eingabemethode , das Problem trat auf, das Keyup--Ereignis war nicht praktisch. Später habe ich online gesucht und die Idee gefunden,

Frage 2: Als die öffentliche WeChat-Plattform entwickelt wurde , fragte der Kunde: „Bei der Eingabe von Inhalten in das Eingabefeld wird hinter dem Eingabefeld eine Schaltfläche zum Löschen angezeigt, um den Inhalt im Eingabefeld zu löschen.“ ". Bei Verwendung des Ereignisses „keyup“ treten einige Keyup-Ereignisse unter der chinesischen Eingabemethode auf. Ungültig,


Methode 1: Registrieren Sie hauptsächlich das Fokusereignis für das Suchfeld und rufen Sie es in regelmäßigen Abständen ab, posten Sie den 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>
Methode 2: Verwenden Sie Eingabe- und Eigenschaftsänderungsereignisse, um das Problem zu lösen,

Ich kann die dom2-Bindungsmethode nur zum Testen verwenden Wie zum Beispiel 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>
Aber es gibt auch Leute, die sagen, dass man mit der JQ-Methode binden kann, wie zum Beispiel: 

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

oder nativ: 

<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>

Das Letzte, was Sie beachten sollten, ist: oninput Beide Ereignisse, onpropertychange und onpropertychange, weisen im IE9 einen kleinen Fehler auf, d noch keine gute Lösung. Allerdings ist oninput & onpropertychange immer noch die beste Möglichkeit, Wertänderungen im Eingabefeld zu überwachen.

Das obige ist der detaillierte Inhalt vonTeilen Sie die Lösung für den Fehler bei der Tastenbetätigung der mobilen JQuery-Tastatur. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Warum wird das Keyup-Ereignis in JQuery nicht ausgeführt?Nächster Artikel：Warum wird das Keyup-Ereignis in JQuery nicht ausgeführt?

In Verbindung stehende Artikel

Mehr sehen