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

Posted 2023-02-19

【中文标题】使用ajax将html嵌入当前页面并设置焦点时没有焦点效果

【英文标题】：There's no focus effect when using ajax to embed html into current page and set focus

【发布时间】：2022-01-22 13:11:47

【问题描述】：

我正在开发 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>

【问题讨论】：

我已经在 Edge 、Chrome 和 FireFox 中尝试过，但它们不起作用。也许这些浏览器不支持这种风格，你可以写一个css来实现这种风格。

【参考方案1】：

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

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

【讨论】：

谢谢。但是为什么它没有像正常效果那样包裹它的黑色边框呢？

我不确定。但是，如果您应用引导样式 - 您将能够看到按钮边框。