How to prevent the input-text focus from being lost by clicking on another element?

Question

I have a input of the kind text, in which I can type a search, which is executed via ajax, while the user type. Below this I have a list of items that were found in a table. By clicking on this table, I change the style of the clicked Row, as if it were selected, but I don’t want the focus of the input to be lost... I want the user, even having clicked on the table, to be able to continue typing.

I tried the event blur but so far I haven’t been able to, because I don’t know if the element clicked was inside the table.

Answer 1

You can place an event in the table to return the focus to the search field with the function focus() jQuery.

Example

//evento click da tabela
$('#resultado').on('click', 'tr', function() {

    //muda a cor da linha atual
    $(this).css('background-color', '#DDEEFF')

    //tira a cor das outras linhas
    $(this).siblings().css('background-color', 'transparent')

    //devolve o foco ao campo de pesquisa
    $('#pesquisa').focus();

});

Demo no jsfiddle

Answer 2

I ended up solving the problem, but this is one of those who should trim the browser tips by browser, because each one has a different thing... so, that being said, here is a solution that I was able to test in Chrome 32, Firefox 27 and IE 8.

The basic idea is at the event blur input, set the focus to itself, if the clicked element belongs to the table.

Coming to the final solution

• First the table must have tabindex, otherwise some browsers can’t see where the focus is going. e.g. Chrome

• Then I have to know where the focus is going, each browser its way:

  • explicitOriginalTarget in FF (which still needs a hack, as it returns the text-Node clicked);

  • relatedTarget in Chrome;

  • And in IE... I don’t know, there are so many ways to do it.

• by setting the focus on blur discovered does not work on FF, and so I had to use a setTimeout

• and finally, to help, IE 8 doesn’t preserve the selection (well that wasn’t a requirement in my question... hehe), so I had to save the selection and restore it after giving the focus back to the input.

Fiddle of the solution

References/Research material

• When onblur occurs, how can I find out which element Focus Went to?

• How to re-focus to a text field when Focus is Lost on a HTML form?

• Is there a way to use Event.preventDefault with focusOut? If not, Why?

Answer 3

If you click on another element, you going lose the focus of the text box. This is controlled by the browser.

The most you can do is use the table row click event (or whatever event you already use to change the line style) to call the method focus to return the focus to the text box. But remember, there will be a change of focus, however fast it may be, and the focus events and blur will be fired into the box and into the table row.

Answer 4

Answer:

There’s no way avoid this.

By default browser behavior, if you click on something else, your focus is lost, however you can return the focus using jquery in this way:

$('sua_tabela tr').click(function(){
  $('seu_input').focus();
});

You can simply by $('seu_input').focus(); at the end of the code you have to select such table row, however make sure that the focus() is running at the end of the process.