モバイル端末(html 5)の微信公衆番号の下でkeyupでinput値の変化をリアルタイムで監視するのは無効です
3264 ワード
検索ボックスはユーザーが入力した値に基づいてリアルタイムで検索し、最初は自然にkeyupを思い浮かべ、ピンイン状態では何の問題もなく、
問題1:中国語入力方式に切り替えて、問題が出てきて、keyup事件は便利ではありませんて、それからネット上で探して、構想を探し当てて、
質問2:微信公衆プラットフォームの開発時、お客様が「入力ボックスに内容を入力する時、入力ボックスの後ろにクリアボタンを表示し、入力ボックスの内容をクリアする」と要求し、「keyup」イベントを使用する時、中国語入力法の下の部分のキーyupイベントは無効である.
方法1:主に検索ボックスにfocusイベントを登録し、時間を隔てて検索し、コードを貼り出す
方法2:inputとpropertychangeイベントで解決できます.
本人テストはdom 2のバインド方法でしか使用できません.documentなどです.getElementById('box').addEventListener('input',function(){...dosomething...},false);
しかし、jqでバインドすればいいという人もいます.
またはオリジナル:
最後に注意しなければならないのは、oninputとonpropertychangeの2つのイベントは、IE 9に小さなBUGがあります.それは、右クリックメニューのカットと削除コマンドでコンテンツを削除するときにトリガーされませんが、IEの他のバージョンは正常で、まだ解決策がありません.ただしoninput&onpropertychangeは入力ボックス値の変化を傍受する最良の方法です.
問題1:中国語入力方式に切り替えて、問題が出てきて、keyup事件は便利ではありませんて、それからネット上で探して、構想を探し当てて、
質問2:微信公衆プラットフォームの開発時、お客様が「入力ボックスに内容を入力する時、入力ボックスの後ろにクリアボタンを表示し、入力ボックスの内容をクリアする」と要求し、「keyup」イベントを使用する時、中国語入力法の下の部分のキーyupイベントは無効である.
方法1:主に検索ボックスにfocusイベントを登録し、時間を隔てて検索し、コードを貼り出す
<script language="javascript" type="text/javascript" src="jquery.js"></script>
<script>
$(function () {
$('#wd').bind('focus',filter_time);
})
var str = '';
var now = ''
filter_time = function(){
var time = setInterval(filter_staff_from_exist, 100);
$(this).bind('blur',function(){
clearInterval(time);
});
};
filter_staff_from_exist = function(){
now = $.trim($('#wd').val());
if (now != '' && now != str) {
console.log(now);
}
str = now;
}
</script>方法2:inputとpropertychangeイベントで解決できます.
本人テストはdom 2のバインド方法でしか使用できません.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 = 'input';
if (navigator.userAgent.indexOf("MSIE") != -1){
bind_name = 'propertychange';
}
$('#inputorp_i').bind(bind_name, function(){
$('#inputorp_s').text($(this).val());
})
</script>
</p>
</body>
</html>しかし、jqでバインドすればいいという人もいます.
$('#input').bind('input propertychange', function() {
alert("....")
});またはオリジナル:
<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>最後に注意しなければならないのは、oninputとonpropertychangeの2つのイベントは、IE 9に小さなBUGがあります.それは、右クリックメニューのカットと削除コマンドでコンテンツを削除するときにトリガーされませんが、IEの他のバージョンは正常で、まだ解決策がありません.ただしoninput&onpropertychangeは入力ボックス値の変化を傍受する最良の方法です.