Javascript Focus () function not working

I have a text box that I want to focus on, but it does not work.

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

Any idea?

+5
source share
5 answers

Maybe you are calling JavaScript before the input element is displayed? Place an input element in front of JavaScript, or wait for the page to load before your JavaScript starts.

In this order, it works fine:

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

In jQuery, you can put your code in .ready()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>
+6
source

I also had the same problem. To solve this problem, put your code in the setTimeout function.

function showMeOnClick() {
    // Set text filed focus after some delay
    setTimeout(function() { jQuery('#searchTF').focus() }, 20);
    // Do your work.....
}
+2
source
    <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();
       }

0

Try to include it in the document ready function and make sure that you have jquery enabled.

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

All Articles