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

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

黄舟

Freigeben： 2017-06-27 14:23:19

Original

2646 Leute haben es durchsucht

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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("....")  
            });

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!