web-dev-qa-db-ja.com

フォーカスを取得しないようにボタンを取得するにはどうすればよいですか？

（ExtJS）ツールバーボタンnotをクリックすると、Webページのフォーカスを取得しますが、クリックしてもフォーカスを変更せずに「処理」を実行します。それ、どうやったら出来るの？

javascriptbuttonextjsfocus
23
Mike Peat

onmousedownのデフォルトの動作をキャンセルすると、要素がフォーカスを取得できなくなります。

// Prevent capturing focus by the button.
$('button').on('mousedown', 
    /** @param {!jQuery.Event} event */ 
    function(event) {
        event.preventDefault();
    }
);
35
real4x

document.activeElementは、現在フォーカスされている要素を格納します。

したがって、ツールバーで、この関数に「マウスダウン」ハンドラーを追加できます。

function preventFocus() {
  var ae = document.activeElement;
  setTimeout(function() { ae.focus() }, 1);
}

この例を試してください：

<html>
<head>
<script>
function preventFocus() {
  var ae = document.activeElement;
    setTimeout(function() { ae.focus() }, 1);
}
</script>
</head>
<body>
<input type="text"/>
<input type="button" onmousedown="preventFocus()" onclick="alert('clicked')" value="Toolbar" />
</body>
</html>
6
Alsciende

ブラウザのデフォルトの動作であるため、やりたいことを簡単に行う方法はないと思います。

もちろん、ボタンをクリックするとすぐにblur（）することもできますが、それではすべての選択が解除されます。以前にアクティブだったオブジェクトにフォーカスを取り戻すには、すべての要素にブラーハンドラーを追加して、ある種の「メモリ」を作成し、最後にフォーカスがあった/失われた要素を追跡する必要があります（要素のIDをグローバルに保存します）要素がフォーカスを失ったときに更新します）。

3
Alan Plum

これは通常私のためのトリックを行います：

<button 
  tabindex="-1"
  onclick="javascript:console.log('do your thing')"
>My Button</button>

から https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex ：

negative値（通常はtabindex="-1"）は、要素がフォーカス可能である必要があるが、順次キーボードナビゲーションを介して到達可能であってはならないことを意味します。 JavaScriptを使用してアクセシブルなウィジェットを作成すると、ほとんどの場合便利です。

2
Lukas Bünger

上位投票の回答は技術的には正しいですが、jQueryに依存します...

より簡単な例を次に示します。

<span onclick="document.execCommand('bold', false);" onmousedown="event.preventDefault();"></span>
1
afloesch

1つのblurイベントリスナーをすべてのフィールドにアタッチします。このリスナーは、フォーカスを失ったフィールドをグローバル変数に保存する必要があります。

次に、すべてのツールバーボタンが1つのフォーカスイベントリスナーを取得する必要があります。このリスナーは、上記のように保存されたフィールドにフォーカスする必要があります。

このコードはテストされていませんが、機能するはずです。

0
Jochen

ツールバーボタンは通常のHTMLボタン要素のスタイルであるため、これは実際のブラウザの動作であり、変更する前によく考えておく必要があります。しかし、それにもかかわらず...

falseハンドラーからonclickを返すだけで、ボットンがフォーカスを受け取らないようにすることができます。

0
Rene Saarsoo

たぶん、フォームフィールドなどにstatefulと状態変更プロパティを使用して、フォーカスを取り戻す必要がありますか？

0
Thevs
<script>
    function focusor(){
        document.getElementById('focus').focus;
    }
    document.onkeydown = focusor;
    document.onclick = focusor;
</script>
<div style="width: 0px; height: 0px; overflow: hiddden;">
    <button id="focus"></button>
</div>

私が見つけたのは、ダミー要素を作成する必要があるということです。この状況で最適に機能するボタンを見つけました。ボタンをdivに配置し、divを0pxにします。

[divに何も表示させないでください。一部のブラウザはそれを無視します]

基本的に、クリックまたはボタンを押すと、このダミーボタンにフォーカスされます。私は非常によく似たプロジェクトを持っていて、彼らが下キーを押すたびに、ページの最初のボタンを選択しました。これは、ボタンに何度も焦点を合わせています。

ジャッキアップのようなものですが、それは機能します。

0
Dillon Burnett