クロムでは、ユーザーがクリアボタンをクリックすると、検索入力で「検索」イベントが発生します。
Internet Explorer 10でJavaScriptで同じイベントをキャプチャする方法はありますか?
私が最終的に見つけた唯一の解決策:
// There are 2 events fired on input element when clicking on the clear button:
// mousedown and mouseup.
$("input").bind("mouseup", function(e){
var $input = $(this),
oldValue = $input.val();
if (oldValue == "") return;
// When this event is fired after clicking on the clear button
// the value is not cleared yet. We have to wait for it.
setTimeout(function(){
var newValue = $input.val();
if (newValue == ""){
// Gotcha
$input.trigger("cleared");
}
}, 1);
});
oninput
イベントは、空の文字列に設定されたthis.value
で起動します。 Xで検索ボックスをクリアしてもバックスペースでも同じアクションを実行したいので、これで問題は解決しました。これはIE 10でのみ機能します。
代わりにinput
を使用してください。すべてのブラウザで同じ動作をします。
$(some-input).on("input", function() {
// update panel
});
何故なの
$("input").bind('input propertychange', function() {
if (this.value == ""){
$input.trigger("cleared");
}
});
この質問には答えられましたが、受け入れられた答えは私たちの状況ではうまくいきませんでした。 IE10は$input.trigger("cleared");
ステートメントを認識/起動しませんでした。
最後のソリューションでは、そのステートメントをENTERキー(コード13)のキーダウンイベントに置き換えました。後世のために、これは私たちの場合にうまくいったものです:
$('input[type="text"]').bind("mouseup", function(event) {
var $input = $(this);
var oldValue = $input.val();
if (oldValue == "") {
return;
}
setTimeout(function() {
var newValue = $input.val();
if (newValue == "") {
var enterEvent = $.Event("keydown");
enterEvent.which = 13;
$input.trigger(enterEvent);
}
}, 1);
});
さらに、ページ上のすべての入力ではなく、「検索」入力にのみこのバインディングを適用したいと考えました。当然、IEもこれを困難にしました... <input type="search"...>
、IEをコーディングしてtype="text"
としてレンダリングしましたが。それが、jQueryセレクターがtype="text"
を参照する理由です。
乾杯!
input
イベントをリッスンするだけです。詳細については 参照 をご覧ください。 IEでSencha ExtJSのクリアボタンに関する問題を修正した方法は次のとおりです。
Ext.define('Override.Ext.form.field.ComboBox', {
override: 'Ext.form.field.ComboBox',
onRender: function () {
this.callParent();
var me = this;
this.inputEl.dom.addEventListener('input', function () {
// do things here
});
}
});
すぐに使えるソリューションは、CSSを使用してXを完全に削除することです。
::-ms-clear { display: none; } /* see https://stackoverflow.com/questions/14007655 */
これには次の利点があります。
asp.netサーバーコントロール用
<asp:TextBox ID="tbSearchName" runat="server" oninput="jsfun_tbSearchName_onchange();"></asp:TextBox>
js
function jsfun_tbSearchName_onchange() {
if (objTbNameSearch.value.trim() == '')
objBTSubmitSearch.setAttribute('disabled', true);
else
objBTSubmitSearch.removeAttribute('disabled');
return false;
}
ref
MSDN onchangeイベント -IE10でテスト済み。
...またはCSSで非表示にする:
input[type=text]::-ms-clear { display: none; }
上記のコードは私の場合は機能していなかったので、1行を変更し、私の場合に機能する$input.typeahead('val', '');
を導入しました。
// There are 2 events fired on input element when clicking on the clear button:// mousedown and mouseup.
$("input").on('mouseup', function(e){
var $input = $(this),
oldValue = $input.val();
if (oldValue === ''){
return;
}
// When this event is fired after clicking on the clear button // the value is not cleared yet. We have to wait for it.
setTimeout(function(){
var newValue = $input.val();
if (newValue === ''){
$input.typeahead('val', '');
e.preventDefault();
}
}, 1);
});