我发现在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('BLURnevent.target: '+event.target.id);
console.log(event);
alert('DIV BLUR EVENT FIRED');
}
function fclick(event){
event.target.focus();
console.log('CLICKnevent.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,它也不会被聚焦。