ie focus bug 解决方法

 更新时间:2009年09月03日 17:27:05   作者:  
在IE中,新创建的input没有如预期的获得焦点。
如果把input.focus()放在一个setTimeout中延时执行,则就可以获得焦点。
复制代码 代码如下:

<script type="text/javascript" >
(function(){
function get(id){
return document.getElementById(id);
}
window.onload = function(){
get('makeinput').onmousedown = function(){
var input = document.createElement('input');
input.setAttribute('type', 'text');
input.setAttribute('value', 'test1');
get('inpwrapper').appendChild(input);
input.focus();
input.select();
}
get('makeinput2').onmousedown = function(){
var input = document.createElement('input');
input.setAttribute('type', 'text');
input.setAttribute('value', 'test1');
get('inpwrapper2').appendChild(input);
setTimeout(function(){
input.focus();
input.select();
}, 0);
}
get('input').onkeypress = function(){
get('preview').innerHTML = this.value;
}
}
})();
</script>
<h1><code>setTimeout</code></h1>
<h2>1、未使用 <code>setTimeout</code></h2>
<button id="makeinput">生成 input</button>
<p id="inpwrapper"></p>
<h2>2、使用 <code>setTimeout</code></h2>
<button id="makeinput2">生成 input</button></h2>
<p id="inpwrapper2"></p>
<h2>3、另一个例子</h2>
<p><input type="text" id="input" value=""/><span id="preview"></span></p>

相关文章

  • 如何设置iframe高度自适应在跨域情况下的可用方法

    如何设置iframe高度自适应在跨域情况下的可用方法

    iframe的高度需要根据子页面的实际高度来进行调整,但是如果子页面不在同一域中怎么办?这时候脚本没有办法获取到子页面的高度,存在JavaScript跨域的问题
    2013-09-09
  • JS组件Bootstrap实现图片轮播效果

    JS组件Bootstrap实现图片轮播效果

    这篇文章主要为大家详细介绍了JS组件Bootstrap实现图片轮播效果的具体代码,对图片轮播效果感兴趣的小伙伴们可以参考一下
    2016-05-05
  • javascript 闪烁的圣诞树实现代码

    javascript 闪烁的圣诞树实现代码

    用js实现非常漂亮的带闪烁效果的圣诞树代码。很佩服作者的想法。效果如下图。
    2009-12-12
  • javascript下拉列表菜单的实现方法

    javascript下拉列表菜单的实现方法

    这篇文章主要介绍了javascript下拉列表菜单的实现方法,采用table来封装,我们知道table的每一行写满了之后,下一行会自动添加,文章末尾附有完整的代码,需要的朋友可以参考下
    2015-11-11
  • 微信小程序progress组件使用详解

    微信小程序progress组件使用详解

    这篇文章主要为大家详细介绍了微信小程序progress组件的使用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-01-01
  • 使用js实现数据格式化

    使用js实现数据格式化

    这篇文章主要介绍了使用javascript实现数据格式化为字符串,非常的实用,这里推荐给有相同需求的小伙伴。
    2014-12-12
  • js实现不提交表单获取单选按钮值的方法

    js实现不提交表单获取单选按钮值的方法

    这篇文章主要介绍了js实现不提交表单获取单选按钮值的方法,涉及javascript鼠标事件及页面元素属性操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08
  • javascript获取web应用根目录的方法

    javascript获取web应用根目录的方法

    这篇文章主要介绍了javascript获取web应用根目录的方法,需要的朋友可以参考下
    2014-02-02
  • javascript代码编写需要注意的7个小细节小结

    javascript代码编写需要注意的7个小细节小结

    每种语言都有它特别的地方,对于JavaScript来说,使用var就可以声明任意类型的变量,这门脚本语言看起来很简单,然而想要写出优雅的代码却是需要不断积累经验的。本文利列举了JavaScript初学者应该注意的七个细节,与大家分享。
    2011-09-09
  • JavaScript数组reduce()方法使用实例详解

    JavaScript数组reduce()方法使用实例详解

    reduce是数组原型对象上的一个方法,可以帮助我们操作数组。本文将和大家分享4个关于JavaScript中数组reduce的用法,希望对大家有所帮助
    2022-07-07

最新评论