web-dev-qa-db-ja.com

無効な入力またはボタンをクリックする

無効なボタンをクリックして、ユーザーにフィードバックを提供することはできますか？

HTML：

<input type="button" value="click" disabled>

およびJavaScript：

$('input').mousedown(function(event) {
    alert('CLICKED');
});

上記のコードは私には機能しません。どちらでもありません：

$('input').live('click', function () {
    alert('CLICKED');
});
javascriptjquerydisabled-control
21
e1761587

無効な要素のクリックをキャプチャする方法はありません。最善の策は、要素の特定のclassに反応することです。

HTMLマークアップ：

<input type="button" class="disabled" value="click" />

JavaScriptコード：

$('input').click(function (event) {
    if ($(this).hasClass('disabled')) {
        alert('CLICKED, BUT DISABLED!!');
    } else {
        alert('Not disabled. =)');
    }
});

次に、CSSスタイリングを使用して、無効な外観をシミュレートできます。

.disabled
{
    background-color: #DDD;
    color: #999;
}

jsFiddle は、その使用方法を示しています。

22
Jesse

クリックイベントが発生するため、フィールドreadonlyを作成すると役立ちます。 動作の違い に注意してください。

<input type="button" value="click" readonly="readonly" />
16
Dennis Golomazov

プット

input[disabled] {pointer-events:none}

cSSで（一部のブラウザが無効な入力のクリックを完全に破棄するのを防ぎます）、親要素のクリックをキャプチャします。それは、クリックをキャプチャするために要素の上に透明なオーバーレイを置くよりもきれいな解決策です。送信され、デフォルトのブラウザ「無効」スタイルをオーバーライドする必要もあります）。

このようなボタンが複数ある場合、クリックされたボタンを区別できるように、それぞれに一意の親が必要です。pointer-events:noneでは、クリックターゲットはボタン自体ではなくボタンの親であるためです。 （または、クリック座標をテストすることもできます...）。

ただし、古いブラウザをサポートする必要がある場合は、pointer-eventsをサポートするブラウザを確認してください。 http://caniuse.com/#search=pointer-events

6
Doin

回避策なしではできません。次を参照してください： jQuery無効化された送信ボタンのクリックを検出

ブラウザは、無効な要素のイベントを無効にします。

リンクからコンテキストを追加するために編集：

質問者は、イベントが登録されない理由の説明でこのスレッドを見つけました： http://www.webdeveloper.com/forum/showthread.php?t=186057

Firefox、およびおそらく他のブラウザは、無効になっているフォームフィールドのDOMイベントを無効にします。無効化されたフォームフィールドで開始するイベントは完全にキャンセルされ、DOMツリーに伝播しません。私が間違っている場合は修正しますが、無効なボタンをクリックすると、イベントのソースは無効なボタンになり、クリックイベントは完全に消去されます。ブラウザは文字通りボタンがクリックされたことを知りませんし、クリックイベントを渡しません。 Webページのブラックホールをクリックしているようです。

回避策は、ボタンのスタイルを「見た目」に無効にすることですが、実際にはそうではありません。

4
Andrew Bartel

disabled要素は、ユーザーがそれらと対話することを許可しません。

そのため、いいえ、onclickボタンにdisabledを配置して起動することはできません。

3
Halcyon

無効なボタンをクリックすることはできませんが、無効なリンクをクリックすることはできます

$('.btn').on('click', function(e) {
  e.preventDefault();
  $txt = $('div.text');
  if($(this).attr('disabled')){
    $txt.html('CLICKED, BUT DISABLED!!');
  }else{
    $txt.html('Not disabled. =)');
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="text">No action</div>
<input type="button" href="" class="btn" value="click" />
<input type="button" href="" class="btn" value="click disabled" disabled />
<a href="" class="btn">Click</a>
<a href="" class="btn" disabled>Click Disabled</a>
0
sglazkov

<input id="idButton" type="button" value="click" disabled>

$('#idButton').on('click', function() {
    // The button is disabled but this will be executed.
});

上記の例は、イベントをキャプチャする必要がある無効なボタンのJQueryで機能します。

0
Lisandro

いくつかの要素でボタンをラップし、代わりにこの要素のクリックをキャッチするのはどうですか？

<span id="container">
    <input type="button" value="click" disabled>
</span>

Javascript：

$("#container").click(function(){
    alert("Element clicked!");
})
0
Gh61