处理焦点从输入元素到按钮

在单击按钮时，我希望输入元素获得焦点。当输入元素失去焦点时，我希望按钮接收焦点。下面是一个简单的例子。

<body>
<button id="b1"
onclick="document.getElementById('i1').focus();">1</button>
<input id="i1" type="text"
onblur="document.getElementById('b1').focus();"/>
<button id="b2"
onclick="document.getElementById('i2').focus();">2</button>
<input id="i2" type="text"
onblur="document.getElementById('b2').focus();"/>
</body>

当我单击任何按钮时，输入元素获得焦点。这是理想的。当我通过单击画布离开两个输入中的任何一个时，焦点不会转到按钮上。这是我的主要问题。

当我将第一个输入保留为tab时，所有浏览器都将焦点传递给第一个按钮。但是当我将第二个按钮保留为tab时，只有firefox将焦点传递给第二个按钮。Chrome和opera没有显示出一个焦点。我很困惑为什么第二个按钮的处理方式不同。

你不需要使用JavaScript。CSS和就足够了。使用标签标签并将其转换为按钮。:

label.btn{
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
padding: 1px 6px;
border:1px solid
}

<label class="btn" for="i1" id="b1">1</label>
<input id="i1" type="text"/>
<label class="btn" for="i2" id="b2">2</label>
<input id="i2" type="text" />

如果你添加一个:focusCSS样式,你可以看到它工作好。我已经将JS从HTML标记中移出，以增加可见性，并为键盘用户添加了一些侦听器。

警告:强迫焦点回到按钮会干扰页面的自然流程，所以我可能不会建议，除非你把它附加到一些输入验证，在需要时触发;否则，键盘用户如何移动到下一个元素?
const inputOne = document.getElementById('i1'); const btnOne = document.getElementById('b1'); const inputTwo = document.getElementById('i2'); const btnTwo = document.getElementById('b2'); // Listen for click to button one btnOne.addEventListener('click', function() { inputOne.focus(); }) // Make sure we listen for keyboard users btnOne.addEventListener('keydown', function(event) { if(event.keyCode === 90) { inputOne.focus(); } }) // Leaving input one inputOne.addEventListener('blur', function() { btnOne.focus(); }) // Listen for click to button two btnTwo.addEventListener('click', function() { inputTwo.focus(); }) // Make sure we listen for keyboard users btnTwo.addEventListener('keydown', function(event) { if(event.keyCode === 90) { inputTwo.focus(); } }) // Leaving input two inputTwo.addEventListener('blur', function() { btnTwo.focus(); })
:focus { border: 1px solid red; }
<button id="b1">1</button> <input id="i1" type="text"/> <button id="b2">2</button> <input id="i2" type="text" />

相关内容

最新更新

热门标签：