handing focus from input element to button-CodePudding

On clicking a button, I want an input element to get focus. When the input element looses focus, I want the button to receive focus. Here is a simple example.

   <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>

When I click any of the buttons, the input element gets focus. This works as desired. When I leave any of the two inputs by clicking on the canvas, the focus does not go to the button. This is my main issue.

When I leave the first input with tab, all browsers pass the focus to the first button. But when I leave the second button with tab, only firefox passes the focus to the second button. Chrome and opera don't show a focus. I am puzzled as to why the second button is treated differently.

CodePudding user response：

If you add a :focus style in your CSS, you can see it works fine. I've moved your JS out of the HTML markup for visibility and added some listeners for keyboard users.

Caution: Forcing focus back to the button interferes with the page's natural flow, so I probably wouldn't advise unless you have it attached to some input validation that fires when needed; else, how do keyboard users move to the next element?

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" />

CodePudding user response：

You don't need to use JavaScript. HTML and CSS is enough. Use label tag and convert it's look like button. :)

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

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