jqueryモバイルキーボードのキーアップの失敗に対する解決策を共有する-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

jqueryモバイルキーボードのキーアップの失敗に対する解決策を共有する

Jun 27, 2017 pm 02:23 PM

jquery keyup 無効

私が最近取り組んだタッチスクリーンバージョンのプロジェクトでは、キーアップを使用して入力値を監視する際に、電話機のキーボードの他のキーを押すのは問題ありませんでしたが、削除キーを監視できませんでした。 . ネットで次の解決策を見つけました。

(原文: http://blog.csdn.net/kongjiea/article/details/40186121)

検索ボックスは、ユーザーが入力した値に基づいてリアルタイムで検索します。当然ピンイン状態でキーアップを考えましたのときは問題なかったのですが、

質問1: 中国語入力方式に切り替えたら問題が出て、その後キーアップイベントが操作不能になりました。オンラインで検索したところ、このアイデアを見つけました。

質問 2: WeChat パブリックプラットフォーム の開発中に、お客様から「入力ボックスにコンテンツを入力すると、入力ボックスの後ろにクリアボタンが表示され、内容をクリアできるようにする」という要望がありました。「キーアップ」イベントを使用するとき、中国語入力メソッドの一部のキーが押されます。キーアップイベントは無効です。

方法 1: 主にフォーカスイベントを登録する検索ボックスで、しばらくしてから検索し、コードを投稿します

&lt;script language=&quot;javascript&quot; type=&quot;text/javascript&quot; src=&quot;jquery.js&quot;&gt;&lt;/script&gt;  
    &lt;script&gt;  
  
    $(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; &amp;&amp; now != str) {  
            console.log(now);  
        }  
        str = now;  
    }  
    &lt;/script&gt;

ログイン後にコピー

方法 2: input イベントと propertychange イベントを使用して問題を解決します、

私のテストは dom2 のバインディングメソッドでのみ使用できますなどdocument.getElementById('box').addEventListener('input',function(){...dosomething...},false);

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

ログイン後にコピー

しかし、次のような jq バインディングを使用できると言う人もいます。

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

ログイン後にコピー

またはネイティブ:

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

ログイン後にコピー

最後に注意すべきことは : oninput です。 onpropertychange と onpropertychange の両方のイベントには、IE9 には小さなバグがあります。つまり、右クリックメニューの切り取りコマンドと削除コマンドを使用してコンテンツを削除するときにイベントがトリガーされません。ただし、IE の他のバージョンでは正常です。現時点ではあまり良い解決策ではありません。ただし、入力ボックスの値の変更を監視するには、oninput と onpropertychange が最適な方法です。

以上がjqueryモバイルキーボードのキーアップの失敗に対する解決策を共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。