Javascript JS生成的不可编辑DIV can'；在静态HTML编码之前，不要在Chrome中聚焦（和模糊）_Javascript_Html_Google Chrome_Onblur

Javascript JS生成的不可编辑DIV can'；在静态HTML编码之前，不要在Chrome中聚焦（和模糊）

javascript html google-chrome

Javascript JS生成的不可编辑DIV can'；在静态HTML编码之前，不要在Chrome中聚焦（和模糊）,javascript,html,google-chrome,onblur,Javascript,Html,Google Chrome,Onblur,我发现在GoogleChrome（43.0.2357.132 m）中，一个不可编辑的JavaScript生成的DIV无法获得焦点，因此它不会模糊，但静态HTML编码的DIV可以有人可以帮助我如何使JS生成的版本获得焦点和模糊？（在IE中工作正常）在Chrome中有一些我没有设置的参数或者什么我试着用JS创建我自己的组合框输入，我想使用不可编辑的div，比如select选项，但我需要知道它是否会模糊以正常工作。所以要将这些设置为contenteditable而不是解决方案下面是要尝试的示例

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

有人可以帮助我如何使JS生成的版本获得焦点和模糊？（在IE中工作正常）在Chrome中有一些我没有设置的参数或者什么

我试着用JS创建我自己的组合框输入，我想使用不可编辑的div，比如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>


功能fblur（事件）{
log（'BLUR\nevent.target:'+event.target.id）；
console.log（事件）；
警报（“触发DIV模糊事件”）；
}
函数fclick（事件）{
event.target.focus（）；
console.log（'CLICK\nevent.target:'+event.target.id）；
console.log（事件）；
}
静态HTML DIV1


var uiobj=document.createElement（“DIV”）；
var t=document.createTextNode（'JS生成的DIV1'）；
文件.正文.附件（uiobj）；
uiobj.儿童（t）；
uiobj.style.border='1px solid'；
//uiobj.style.display='block'；
uiobj.style.height='20px'；
uiobj.style.width='200px'；
uiobj.id='JS生成的DIV1'；
uiobj.contentEditable=false；
uiobj.tabindex='2'；
uiobj.addEventListener（'click'，fclick，false）；
uiobj.addEventListener（'blur'，fblur，false）；

如果你尝试它的第一个div将集中和模糊。如果模糊，将提醒它。第二个div也应该这样做，在ID中做得很好，但是在Chrome中第二个div不会模糊

谢谢你的帮助

要将一个元素声明为可聚焦（以及“可模糊”），您需要设置一个

tabindex

。见：

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

你的问题是：

uiobj.tabindex= '2';

应该是：

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

因此，两个元素之间的区别并不是一个是动态生成的，而是因为输入错误而没有tabindex。如果您删除静态选项卡上的tabindex，它也将无法聚焦。

非常感谢！这确实解决了问题（几周前我没找到它）