JS 生成不可编辑 DIV 无法在 Chrome 中聚焦（和模糊）直到静态 HTML 编码可以

Question

我发现在 GoogleChrome (43.0.2357.132 m) 中生成的不可编辑 JavaScript DIV 无法获得焦点，因此它永远不会模糊但是静态 HTML 编码 DIV 可以。

谁能帮我看看如何让JS生成的版本对焦模糊？（它在 IE 中工作正常） Chrome?

中有一些我没有设置的参数

我尝试通过 JS 制作我自己的组合框输入，我想使用不可编辑的 divs 像 select 选项，但我需要知道它是否模糊才能正常工作。所以将这些设置为 contenteditable 不是解决方案...

这里是要尝试的示例代码：

<!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 不会模糊。

感谢帮助！

Answer 1

要将元素声明为可聚焦的（以及 "blurable"），您需要设置 tabindex。参见：

The tabindex content attribute allows authors to indicate that an element is supposed to be focusable

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

你的问题在这里：

uiobj.tabindex= '2';

应该是：

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

所以你的两个元素之间的区别不在于一个是动态生成的，而是一个因为错字而没有 tabindex。如果您删除静态标签上的 tabindex，它也将无法聚焦。

JS 生成不可编辑 DIV 无法在 Chrome 中聚焦（和模糊）直到静态 HTML 编码可以

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

html

javascript

google-chrome

onblur