JS生成的不可编辑的DIV不能在Chrome中聚焦(和模糊)，直到静态HTML编码可以

JS generated not editable DIV can't focus (and blur) in Chrome till static HTML coded can

本文关键字：模糊 静态 编码 HTML 编辑 DIV 不能 JS Chrome 聚焦      更新时间：2023-09-26

我发现在googlecrome (43.0.2357.132 m)一个不可编辑的JavaScript生成的div不能得到焦点，所以它永远不会模糊，但静态HTML编码的div可以。

有人可以帮助我如何使JS生成的版本获得焦点和模糊?(在IE中运行良好)有一些参数，我没有设置或什么在Chrome?

我试着让我自己的组合框输入的JS，我想使用不满足的div喜欢选择选项，但我需要知道它是否模糊正常工作。因此，将这些设置为可满足的不是一个解决方案…

下面是要尝试的示例代码: 
<!DOCTYPE html> <!--HTML5-->
<html lang= "hu">
<head>  
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <script language = "javascript">
            function fblur(event){
            console.log('BLUR'nevent.target: '+event.target.id);
            console.log(event);
            alert('DIV BLUR EVENT FIRED');
            }
            function fclick(event){
            event.target.focus();
            console.log('CLICK'nevent.target: '+event.target.id);
            console.log(event);
            }
        </script>
    </head>  
    <body id="Body">
        <div style="border: 1px solid; 
             height: 20px; 
             width: 200px;"
             id="STATIC HTML DIV1" 
             contenteditable="false"
             tabindex="1"  
                 onclick="fclick(event)" 
                 onblur="fblur(event)" 
        >STATIC HTML DIV1</div>
        <BR />  
        <script language = "javascript">
            var uiobj=document.createElement("DIV");
            var t = document.createTextNode('JS GENERATED DIV1');
            document.body.appendChild(uiobj);
            uiobj.appendChild(t);
            uiobj.style.border = '1px solid';   
            //uiobj.style.display = 'block';    
            uiobj.style.height = '20px';    
            uiobj.style.width = '200px';
            uiobj.id = 'JS GENERATED DIV1'; 
            uiobj.contentEditable = false;
            uiobj.tabindex= '2';            
            uiobj.addEventListener('click', fclick, false);
            uiobj.addEventListener('blur', fblur, false);       
        </script>
    </body>
</html>

如果你尝试它，第一个div将聚焦和模糊。如果模糊会提醒它。第二个div应该做同样的事情，在ID中它做得很好，但在Chrome中第二个div不会模糊。

谢谢你的帮助!

要声明一个元素为可聚焦(以及"blurable")，您需要设置一个tabindex。看到:

tabindex内容属性允许作者指出元素应该是可聚焦的

https://html.spec.whatwg.org/multipage/interaction.html focusable-area

你的问题在这里:

uiobj.tabindex= '2';

应该是:

 uiobj.tabIndex= '2'; //with a capital I

所以你的两个元素之间的区别不是一个是动态生成的，而是因为那个打字错误，一个没有tabindex。如果你在静态视图上删除tabindex，它也不会被聚焦。

相关文章：