概要を使わずにHTML要素に焦点を当てる方法は？

Question

注意：アウトラインが表示されないボタンをクリック

キータブで移動するとき、それはまた、アウトラインを防止するが、ボタンがdocument.activeElement（JSFiddle）となるよう:focus { outline: none }が答えではありません。私はこの動作を模倣したいマウスをクリックすることなく。

方法必要があります。

1. はdocument.activeElementとしての要素を作ります。
2. は、アウトライン
3. はまだ（

キーキーボードのタブを押したときに誰もが要求された場合は、私の現在の意図はモーダルダイアログを集中し、ダイアログである場合は、前のフォーカスのある要素にフォーカスを戻すことであるアウトラインを許可起こしません。閉じこれは、シームレスな体験のためのアウトラインを防止することが必要です）

擬似コード：

showDialog(); 

function whenDialogClosed() { 
    previouslyFocused.focus(); // should not display outline 
} 

Answer 1

非フォーカスにトランジションを追加することができます。

var dial = document.getElementById('dial'); 
 
var focused; 
 
function openDialog(){ 
 
    document.body.className="havingFocus"; 
 
    dial.className=""; 
 
    focused = document.activeElement; 
 
    document.getElementById('new_focus').focus(); 
 
} 
 
function closeDialog(){ 
 
    document.body.className=""; 
 
    dial.className="hidden"; 
 
    focused.focus(); 
 
}

.havingFocus * { 
 
    transition: all 0s; 
 
    transition-delay: 20000s; 
 
    outline: 1px solid transparent; 
 
} 
 
*:focus{ 
 
    transition-delay:0s; 
 
    outline: 2px solid highlight; 
 
} 
 

 
div{ 
 
    margin:20px; 
 
    border:1px solid black; 
 
    padding: 20px; 
 
    position:relative; 
 
} 
 
div:before{ 
 
    content:'x'; 
 
    position: absolute; 
 
    right:10px; 
 
    top:0px; 
 
} 
 

 
.hidden{ 
 
    display:none; 
 
}

<input value="test123"/> 
 
<div id="dial" class="hidden"> 
 
    <input value="in dialog" id="input"/> 
 
    <button onclick="closeDialog()" id="new_focus">close</button> 
 
</div> 
 
<button onclick="openDialog()">open</button>