Javascript Focus() function not working

Question

I have a textbox which I want to set the focus on, but it doesn't work.

document.getElementById("txtCity").focus();

Any idea?

Answer 1

Maybe you are calling the JavaScript before the input element is rendered? Position the input element before the JavaScript or wait until the page is loaded before you trigger your JavaScript.

In that order, it works just fine:

<input type="text" id="test" />
<script type="text/javascript">
  document.getElementById("test").focus();
</script>

In jQuery you could place your code within the .ready() method to execute your code first when the DOM is fully loaded:

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
  $(document).ready(function () {
    $("#test").focus();
    // document.getElementById("test").focus();
  });
</script>

Answer 2

In case someone searching has a similar situation to mine ... I had to set a tabindex attribute before my div could receive focus():

featured.setAttribute('tabindex', '0');
featured.focus();
console.log(document.activeElement===featured); // true

(I found my answer here: Make div element receive focus )

And of course, make sure the body element is ready before setting focus to a child element.

Answer 3

I have also faced same problem.To resolve this problem, put your code in setTimeout function.

function showMeOnClick() {
    // Set text filed focus after some delay
    setTimeout(function() { jQuery('#searchTF').focus() }, 20);
    // Do your work.....
}

Answer 4

Try to wrap it into document ready function and be sure, that you have jquery included.

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script>
       $(document).ready(function() {
          $("#test").focus();
       });
    </script>

Answer 5

I had a similar problem as Martin Buberl mentioned above, the element did not exist on the moment I gave focus(). I used window.requestAnimationFrame() to give a callback which will give focus on the next render.

window.requestAnimationFrame(() => elm.focus())

Answer 6

    <div id="txtROSComments" contenteditable="true" onkeyup="SentenceCase(this, event)"style="border: 1px solid black; height: 200px; width: 200px;">
    </div>
    <script type="text/javascript">
        function SentenceCase(inField, e) {
            debugger;
            var charCode;

            if (e && e.which) {
                charCode = e.which;
            } else if (window.event) {
                e = window.event;
                charCode = e.keyCode;
            }

            if (charCode == 190) {
                format();
            }
        }

        function format() {
            debugger; ;
            var result = document.getElementById('txtROSComments').innerHTML.split(".");

            var finaltxt = "";


            var toformat = result[result.length - 2];

            result[0] = result[0].substring(0, 1).toUpperCase() + result[0].slice(1);

            if (toformat[0] != " ") {

                for (var i = 0; i < result.length - 1; i++) {
                    finaltxt += result[i] + ".";
                }

                document.getElementById('txtROSComments').innerHTML = finaltxt;
                alert(finaltxt);
                abc();
                return finaltxt;
            }



            if (toformat[0].toString() == " ") {
                debugger;
                var upped = toformat.substring(1, 2).toUpperCase();

                var formatted = " " + upped + toformat.slice(2);

                for (var i = 0; i < result.length - 1; i++) {

                    if (i == (result.length - 2)) {
                        finaltxt += formatted + ".";
                    }
                    else {
                        finaltxt += result[i] + ".";
                    }

                }
            }
            else {
                debugger;
                var upped = toformat.substring(0, 1).toUpperCase();

                var formatted = " " + upped + toformat.slice(1);



                for (var i = 0; i < result.length - 1; i++) {
                    if (i == (result.length - 2)) {
                        finaltxt += formatted + ".";
                    }
                    else {
                        //if(i
                        finaltxt += result[i] + ".";
                    }

                }

            }
            debugger;
            document.getElementById('txtROSComments').value = finaltxt;
            return finaltxt;

        }

    </script>
   <script type="text/javascript">
       function abc() {
           document.getElementById("#txtROSComments").focus();
       }

Answer 7

It works fine in this example http://jsfiddle.net/lmcculley/rYfvQ/