Question

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

有人可以帮助我如何使JS生成的版本获得焦点和模糊？（在IE中工作正常） Ther是我没有设置的参数或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不会模糊。

谢谢你的帮助！

Answer 1

要将元素声明为可聚焦（以及＆＃34;可连接＆＃34;），您需要设置tabindex。参见：

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

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编码即可

1 个答案: