私のチームはAngularStrapを使用して、Bootstrapモーダル（ポップオーバー、ツールチップなど）をAngular1.5アプリに統合しています。残念ながら、AngularStrapが要素を表示するファンキーな方法のため、これらのモーダル内の要素に確実にフォーカスを設定することは非常に困難であることがわかりました。このロジックはここにあります：
基本的に、すべてのAngularStrapモーダルは非表示の状態で始まります。
// Set the initial positioning. Make the tooltip invisible
// so IE doesn't try to focus on it off screen.
tipElement.css({top: '-9999px', left: '-9999px', right: 'auto', display: 'block', visibility: 'hidden'});
次に、内部のAngularrequestAnimationFrameサービスコールバックに応答して表示されます。
$$rAF(function () {
// Once the tooltip is placed and the animation starts, make the tooltip visible
if (tipElement) tipElement.css({visibility: 'visible'});
...
});
残念ながら、これは、ツールチップのすべてのDOM要素が構築された時点で、ツールチップは通常まだ表示されておらず、これらの要素でfocus（）を呼び出そうとしても失敗することを意味します。私の経験では、これは断続的に発生することに注意してください（私にとっては時間の約20％）。
ツールチップでアニメーションを無効にしてみましたが、その場合、この非表示/表示のダンス全体をスキップするほど賢くはないようです。私は明らかに超ハッキーなものを試すことができます（たとえば、フォーカスを設定する前に任意のタイムアウトを使用する）が、より信頼性の高いオプションを探しています。
onShowイベントを利用してみませんか？少し間違って文書化されていますが、要素をフォーカスするハンドラーをアタッチできますbs-on-show。さらに、ハンドラーを汎用にして、次のようなfocus-me属性とフォーカスを持つ要素を探すことができます。
<div bs-popover
data-content='this input should be focused: <input type="text" focus-me>'
data-placement="bottom"
bs-on-show="setFocus"
data-html="true">
click me to show popover
</div>
<div bs-tooltip
data-title='this input should be focused: <input type="text" focus-me style="color:#000;">'
data-placement="bottom"
data-trigger="click"
bs-on-show="setFocus"
data-html="true">
click me to show tooltip
</div>
ジェネリックハンドラー
$scope.setFocus = function(e) {
e.$element.find('[focus-me]').focus()
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加