2 zxhm001 zxhm001 于 2015.06.15 15:25 提问

用JS创建的元素:focus在IE之除外的浏览器无效

元素是这么来的:

 var rootDiv = document.createElement("div");
 rootDiv.setAttribute("id", list[i].ID);
 rootDiv.setAttribute("class", "extent");

 var div = document.createElement("div");
 var input = document.createElement("input");
 input.setAttribute("type", "image");
 input.setAttribute("src", "/Content/Images/check.png");
 var p1 = document.createElement("p");
 var p2 = document.createElement("p");
 p1.setAttribute("class", "pinfo");
 p2.setAttribute("class", "pinfo");
 p1.innerHTML = "时间:" + new Date(list[i].SUBTIME).format("yyyy年MM月dd日");
p2.innerHTML = "备注:" + list[i].REMARK;
rootDiv.appendChild(input);
rootDiv.appendChild(div);
div.appendChild(p1);
div.appendChild(p2);
panel.appendChild(rootDiv);

css 是这样的:

 .extent:focus {
    border:2px solid #96C2F1;
    background-color: #EEFAFF
}

结果是在IE中,这是有效果的,但是在FF,CHROME等浏览者中没效果。还有就是如果我只是把那些元素直接写入HTML,也是有效果的

1个回答

bulusli3
bulusli3   Ds   Rxr 2015.06.15 15:58

ie、chrome、firefox的添加元素和样式的语法不一样,你要想兼容,可以通过jquery进行添加试试。

bulusli3
bulusli3 回复zxhm001: chrome下focus需要有一定的延迟,你可以用脚本试试。setTimeout(function(){xxx.focus();},10);
大约 3 年之前 回复
zxhm001
zxhm001 元素都是添加进去了的,连hover效果都有,但是focus效果就没有。。。。
大约 3 年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
解决ie8 中 focus函数不好使问题
在做项目时遇到了这么一个问题,弹出层时,自动让文本框获得焦点,就是$('id').focus(); 可问题是次函数在ie9上好使,在ie8上不好使。后来改为js形式document.getELementById('id').focus()也不好使。 后来看到论坛讨论可以通过这种方式解决: $("#shadeQRCodeDiv").show(); $('.qrCo
解决 input 框在 edge浏览器中,focus 失效问题
$.fn.setCursorPosition = function(position){       if(this.lengh == 0) return this;       return $(this).setSelection(position, position);   }      $.fn.setSelection = function(selectionStart, se
动态添加dom元素(innerHTML方式)时focus()在第二次时会失效的解决办法
纠结了很久,终于把这个问题解决了!之前在动态构建这个innerHTML内容时,第一次光标可以自动定位到文本框中,但是在第二次构造的时候就失效了。最后终于在一个网站上瞅到了解决办法。非常感谢blueidea的misshjn网友提出的问题,也非常感谢mozart0这位网友给出的解答,直接帮我解决了这个困惑。引用地址:http://bbs.blueidea.com/thread-2608749-1-1.
textarea在ie中focus不起作用
由于兼容性没有考虑周全,今天遇到了这个问题: html lang="en"> head> meta charset="UTF-8"> title>Documenttitle> head> body> textarea name="" id="" cols="30" rows="10" readOnly=true>sdfasdfadsfasdftextarea>
IE点击子div,父div不获取焦点问题的解决办法(一)
原始需求:父div上面有tabindex="0",点击子div,子div获取焦点,这个时候,希望父div也获取焦点。 这个在Chrome,FF浏览器上均表现正常,唯独IE环境不好用,困扰了许久,花费大约一天时间,尝试过各种办法,比如JS脚本,focus()方法,阻止冒泡事件,增加div蒙层,嵌套层级等等,都不能解决,也不是最理想的办法。最后还是stackoverflow上搞定问题。 Demo在
关于IE10输入框focus后触发input事件的bug
工作中遇到的问题,谨记录以作备忘!!!问题描述IE10 在页面输入框上同时绑定了input以及foucs事件,当触发foucs事件的时候会触发input事件,导致我的第一次搜索无效。注:本人只在IE8/IE10/Chrome等浏览器上进行测试,表现结果为:IE8、Chrome表现正常,IE10表现异常暂时解决办法在一番搜索之后,在这个异常反馈(注意这个链接得翻墙)中找到相同的表现,具体如下: T
解决火狐浏览器iframe的focus和blur事件触发无效问题
function setit(){ if(document.all){ document.getElementById("myframe").attachEvent("onblur",dothis); }else{ document.getElementById("myframe").contentWindow.addEventListener("blur",dothis
IE浏览器不支持display:none导致option不能隐藏的问题
项目场景:级联的select元素,根据一级select的选择,二级select中的option选项需要对应的隐藏或显示。 原来的做法是display:none和display:block来隐藏和显示option,option中通过自定义属性data-category过滤,控制option的隐藏或显示,结果在IE浏览器中并不能达到想要的效果,通过网络查找,是因为IE浏览器不支持display:no
javascript/js对html元素自定义属性的操作(兼容Firefox和IE)
很多情况下,我们常常通过javascript对HTML元素的属性进行操作,如获取或设置以下html代码块中input元素的value; 1 input id="input_btn" type="button" value="kanqd.com" /> 我们常常会写以下的代码: 1 2 var input
关于focus()不生效的问题
有时候想让输入框自动获取标签,给它写了个focus()但是一直不生效。最后发现不生效的原因有两种1、html的dom结构发生了变化。例如input框在一个类为input_box的div里面,而前面写了个事件把 input_box挪到了其他地方,挪的事件和focus函数同级,然后focus()一直不生效。如下html:  <div class="input_box"> <in...