HTML Input, Always in Focus

Html input, always in focus

Try this:

<!-- On blur event (unfocus) refocus the input -->

<input onblur="this.focus()" autofocus /> 

<input value="Can't focus on this" />

Maintain focus on an input tag

If we just call .focus() right on blur event, it will restore focus, but actually there will be no text cursor. To handle this we have to let element to lose focus and then return it in few milliseconds. We can use setTimeout() for this.

$('#inp').on('blur',function () { 
    var blurEl = $(this); 
    setTimeout(function() {
        blurEl.focus()
    }, 10);
});

Here's working example. Be careful - you can't leave text field after you enter it =)

EDIT I used jQuery, but it can be easily done without it.

EDIT2 Here's pure JS version fiddle

<input type="text" id="elemID" />

<script type="text/javascript">
    document.getElementById('elemID').onblur = function (event) { 
        var blurEl = this; 
        setTimeout(function() {
            blurEl.focus()
        }, 10);
    };
</script>

How to always focus keep focus in text box

Using jQuery would look something like this:

$(function() {
     // Focus on load
     $('.scanner').focus();
     // Force focus
     $('.scanner').focusout(function(){
         $('.scanner').focus();
     });
     // Ajax Stuff
     $('.scanner').change(function() {
         $.ajax({
             async: true,
             cache: false,
             type: 'post',
             url: '/echo/html/',
             data: {
                 html: '<p>This is your object successfully loaded here.</p>'
             },
             dataType: 'html',
             beforeSend: function() {
                 window.alert('Scanning code');
             },
             success: function(data) {
                 window.alert('Success');
                 $('.objectWrapper').append(data);
             },
             // Focus
             complete: function() {
                 $('.scanner').val('').focus();
             }
        });
    });
});

jsFiddle example: http://jsfiddle.net/laelitenetwork/fuMYX/5/

P.S: jQuery haters gonna hate ;).

How do I set the focus to the first input element in an HTML form independent from the id?

You can also try jQuery based method:

$(document).ready(function() {
    $('form:first *:input[type!=hidden]:first').focus();
});

How can I set focus always on input in Angular

You should use the (blur) event binding instead. I think that is the right binding keyword when it comes to blurred/losing focus events.

First, we bind the blur event to the onBlur() method. Next, we set an template reference variable on the input element.

<input matInput #yourInput (blur)="onBlur($event)">

And on your component.ts, we will set the element to focus whenever onBlur is triggered.

@ViewChild('yourInput', {static: false}) yourInput: ElementRef;

onBlur(event) {
  this.yourInput.nativeElement.focus()
}

I have made a demo over here.

How do I force cursor to always be in one form field using HTML5/Javascript?

This will do what you're trying to do. I'm listening for the blur event and re-focusing the input when it happens. Here is plain javascript if you don't want the overhead of jQuery for something so simple.

var alwaysFocusedInput = document.getElementById( "focus_target" );

alwaysFocusedInput.addEventListener( "blur", function() {

  setTimeout(() =>{

    alwaysFocusedInput.focus();

  }, 0);

});

<input type="text" id="focus_target" placeholder="always focused" autofocus />

<input type="text" placeholder="some other input" />

How to set focus on an input field after rendering?

You should do it in componentDidMount and refs callback instead. Something like this

componentDidMount(){
   this.nameInput.focus(); 
}

class App extends React.Component{

  componentDidMount(){

    this.nameInput.focus();

  }

  render() {

    return(

      <div>

        <input 

          defaultValue="Won't focus" 

        />

        <input 

          ref={(input) => { this.nameInput = input; }} 

          defaultValue="will focus"

        />

      </div>

    );

  }

}

    

ReactDOM.render(<App />, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.js"></script>

<div id="app"></div>

set focus in next html input after editing and clicking enter

As Nitin mentions in the comment above, the Enter key is mainly used as a button press or submitting the form. Anyway, try this example for your solution.

const inputs = document.querySelector('.dws-input');
const formControl = document.querySelectorAll('.form-control');

formControl[0].focus();

function keyPressFunction(ev) {
  if (ev.code !== 'Enter') return;
  if (ev.target.value === '') return;

  for (const i of formControl) {
    if (i.value === '') {
      i.nextElementSibling.focus();
      break;
    }
  }
}

inputs.addEventListener('keydown', keyPressFunction);

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous" />

<div class="conteiner">
  <form novalidate>
    <h6 class="title">PACKING</h6>
    <div class="dws-input">
      <div class="col-md-3"></div>
      <div>
        <div class="form-floating mb-3 mt-3">
          <input type="text" class="form-control" novalidate id="tLogin" name="username" placeholder="Логин:" autofocus />
          <label for="tLogin">Login:</label>
        </div>
        <div class="form-floating mb-3 mt-3">
          <input type="text" class="form-control" novalidate id="tTable" name="text" placeholder="Номер стола:" />
          <label for="tTable">Table:</label>
        </div>
      </div>
      <div class="form-floating mb-3 mt-3">
        <input type="text" novalidate class="form-control" id="tOrder" name="text" placeholder="Заказ:" />
        <label for="tOrder">Order:</label>
      </div>
    </div>
  </form>
</div>

---

Related Topics