自动对焦在来自 AJAX 的动态内容的文本框中不起作用答案

【问题标题】：autofocus doesn't work in textbox of dynamic content from AJAX自动对焦在来自 AJAX 的动态内容的文本框中不起作用
【发布时间】：2016-10-07 02:48:50
【问题描述】：

我在JS 中创建了一个函数，它通过AJAX 获取HTML 内容并将其放入引导对话框中。

现在我已将 autofocus 属性添加到动态 HTML 中的输入框。问题是我看到输入框的焦点有一段时间然后消失了。

JS代码：

function getPage(userid) {
    $.ajax({
        type: 'POST',
        url: PAGE_URL,
        data: {'userid':userid},
        success: function (data) {
            changeDialogContent(data);
        },
        error: function (e, textStatus) {
            alert('Error occured while processing your request');
        }
    });
}

changeDialogContent 函数只是将动态内容作为 HTML 添加到对话框中。

var bootstrapmodal=$('#modelDiv');
function changeDialogContent(content) {
    bootstrapmodal.html(content);
}

HTML 输入代码：

<input type="text" class="form-control input-sm someInputBox" autofocus="autofocus" value="0" placeholder="Enter Name"/>

我也尝试在将 HTML 内容设置到 Bootstrap 对话框之后添加$('.someInputBox').focus();，但也没有运气。

我遗漏了什么重要的东西吗？

【问题讨论】：

你能显示changeDialogContent的代码吗？添加小提琴可能有用
问题是我看到输入框的焦点有一段时间然后消失了。....检查页面是否重新加载。
@SamGhatak 更新了代码，将内容设置为 HTML 只是正常功能。
@Jai 没有页面没有重新加载，因为它是 AJAX 它只是在引导对话框中显示 HTML 内容。
你试过changeDialog()函数中的$('.someInputBox').focus();吗？

标签： javascript jquery html ajax twitter-bootstrap

【解决方案1】：

这是我的 php 代码，我认为它与您的目标相似..

test.php:

<?php
        echo '<input id="my-input" type="text" class="form-control input-sm someInputBox" autofocus="autofocus" value="0" placeholder="Enter Name"/>';

?>

HTML 和 JAVASCRIPT 代码：

 <html>
    <head>
        <script src = "bower_components/jquery/dist/jquery.js"></script>
        <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">

        <script>


            function getPage() {
                $.ajax({
                    type: 'POST',
                    url: "test.php",
                    data: {},
                    success: function (data) {
                        changeDialogContent(data);
                            document.getElementById("my-input").focus();
                    },
                    error: function (e, textStatus) {
                        alert('Error occured while processing your request');
                    }
                });
            }
            function changeDialogContent(content) {
                $('#modelDiv').html(content);
            }   

        </script>
    </head>
    <body onload="getPage()">
        <div id = "modelDiv" class="col-md-3 col-md-offset-4">
        </div>
    </body>
</html>

我使用了bower，所以jquery和bootstrap的源路径不是cdn。而且这段代码工作得很好。我没有遇到任何错误。我很抱歉我不能提供一个小提琴，因为它有一个服务器请求和响应。所以我在自己的机器上测试了它。

如果我误解了任何内容，请纠正我。

【讨论】：

我不想捕获输入框的焦点事件，我只想在打开对话框时将光标放在文本框中。
好吧.. 让我执行.. 一会儿我会赶上你的。
@Alok 看看..我这里没有错误..如果你愿意，我什至可以附上截图。
页面在DOM中加载时文本框是否有焦点？
是的。确实如此。要我分享屏幕截图吗？