Ahmad Bin Shafaat
Ahmad Bin Shafaat

Reputation: 125

JavaScript Focus not working

Javascript focus is not working in my code.

HTML

<div class="col-md-6" style="border:none; margin-top:2px; padding-right:5px">
    <input type="text" id="edtunt" ng-model="Unit" class="form-control" placeholder="Edit Unit" />
</div>

Javascript

var textbox = document.getElementById('edtunt');
//document.getElementById("edtunt").focus();
document.getElementById("edtunt").focus();
$scope.Unit = unit.name;

Upvotes: 2

Views: 12394

Answers (3)

Gijs Groenewegen
Gijs Groenewegen

Reputation: 1

Indeed your code should work. Just a question, why you do:

var textbox = document.getElementById('edtunt');
document.getElementById("edtunt").focus();

Instead of:

var textbox = document.getElementById('edtunt');
textbox.focus();

What worked for me is making sure the whole document is loaded before setting focus. A very easy way to do that is using this copy paste JQuery code:

$( document ).ready(function() {
    var textbox = document.getElementById('edtunt');
    textbox.focus();
});

Hope this might help!

Upvotes: 0

Kirti Chaturvedi
Kirti Chaturvedi

Reputation: 1325

use tabindex="0" for making div focusable

Upvotes: 6

Yosvel Quintero
Yosvel Quintero

Reputation: 19090

Your code works:

document.getElementById('edtunt').focus();
<div class="col-md-6">
  <input 
    type="text" 
    id="edtunt" 
    ng-model="Unit" 
    class="form-control" 
    placeholder="Edit Unit">
</div>

Also, within your AngularJS application, you can add the autofocus attribute:

angular
  .module('MyApp', [])
  .controller('MyController', function() {});
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="MyApp" ng-controller="MyController">
  <div class="col-md-6">
    <input 
      autofocus 
      type="text" 
      id="edtunt" 
      ng-model="Unit" 
      class="form-control" 
      placeholder="Edit Unit">
  </div>
</div>

Upvotes: 1

Related Questions