使用ajax将html嵌入当前页面并设置焦点时没有焦点效果

Question

我正在开发 asp.net core 并在 Edge 浏览器中测试（版本：96.0.1054.62）。

我发送 ajax 请求并获取 html 内容，然后我将 html 块嵌入到当前页面中。之后，我将重点放在 html 块中的 html 元素上。但是调用setFcous函数时看不到焦点效果。

一般来说，当我将焦点放在一个元素上时，它会像下面一样被黑色边框包裹起来。

以下是代码示例：

索引.cshtml

<form>
    <input id="btnDelete" value="Delete" type="button" style="width: 60px" />
</form>

<div id="divInputs" style="display: none">
</div>

<script type="text/javascript">
function setFocus(elementId) {
    var obj = document.getElementById(elementId);
    if (isDefine(obj)) {
        console.log(obj);
        obj.focus();
    }
}

function isDefine(obj) {
    return !(obj == undefined || obj == null)
}

$(function () {
    $('#btnDelete').on('click', function () {
        $.get('/Home/Delete?', (data) => {
            $('#divInputs').html($(data));
            $('#divInputs').show();
            setFocus('btnAction');
        });
    });
});
</script>

HomeController.cs

public IActionResult Delete()
{
    return View("Delete");
}

删除.cshtml

@{
Layout = null;
}

<div>
    <input id="btnAction" class="button" type="button" value="Delete"/>
    <input id="btnCancel" class="button" value="Cancel" type="button"/>
</div>

Answer 1

焦点设置在您的代码中的按钮上。您可以通过将以下样式添加到页面来对其进行测试。

<style>
    input:focus {
        background-color: yellow;
    }
</style>