Javascript的Focus()函数无法正常工作

Question

我有一个文本框，想让它获得焦点，但是没有成功。

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

有任何想法吗？

- Itay.B

---

文本框的HTML代码是什么样子的？ - Larry Hipp

document.getElementById("txtCity") 是否返回 undefined？在控制台中是否有 JavaScript 错误？使用的是哪个浏览器？该元素是否确实可以聚焦？请展示更多代码。 - Matt Ball

使用IE8浏览器。页面没有错误。 - Itay.B

例如，Fx将不会在<input NAME="txtCity"上执行getElementById操作 - 它需要一个ID才能执行getElementById操作，但IE可以工作。 - mplungjan

我们需要更多的代码，因为这个基本命令显然是有效的。http://jsfiddle.net/kBxA4/2/ - Dutchie432

Answer 1

如果有人搜索的情况与我类似...在我的

之前，我必须设置tabindex属性才能接收focus()：

如果有人搜索的情况与我类似...在我的<div>之前，我必须设置tabindex属性才能接收focus()：

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

（我在这里找到了答案：使div元素获得焦点）

当然，在将焦点设置到子元素之前，请确保body元素已准备就绪。

- Symbolic

Answer 2

可能是因为在输入元素渲染之前就调用了JavaScript？将输入元素放置在JavaScript之前，或在触发JavaScript之前等待页面加载。

按照这个顺序，它可以正常工作：

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

在 jQuery 中，你可以将你的代码放在 .ready() 方法中，在 DOM 全部加载完成后首先执行你的代码：

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

- Martin Buberl

Answer 3

我也面临过同样的问题。为了解决这个问题，请将代码放在setTimeout函数中。

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

- Rubi saini

---

使用超时限制完成这个任务只是一种简单粗暴的方法。 - d0n.key

是的，添加超时只是一种解决方法，因为我们需要下一个时钟周期事件来重新绘制DOM以显示更改。我们可以选择另一种方法来解决这个问题 :-) - Rubi saini

我通过为创建的对象动画应用“animationend”监听器来解决了这个问题（因为我的对象是以动画形式出现的）。这样一来，它在到达预定位置后就会获得焦点。 - d0n.key

Answer 4

尝试将其包装在文档准备函数中，并确保您已经包含了jQuery。

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

- kajo

Answer 5

我遇到了与Martin Buberl提到的上面类似的问题，即在我调用focus()时元素不存在。我使用了window.requestAnimationFrame()来提供一个回调函数，在下一次渲染时将焦点放在该元素上。

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

- Steve Jung

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();
       }

- asdf

---

有代码是很好的，但如果您能添加一些解释就更好了。 - Joshua Dwire

我不确定如何在这段代码中找到问题的答案。 - Chris Gerken

Answer 7

这个例子中运行良好 http://jsfiddle.net/lmcculley/rYfvQ/

- Lance