ie focus bug 解决方法


Posted in Javascript onSeptember 03, 2009

如果把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>
Javascript 相关文章推荐
jQuery 源码分析笔记(3) Deferred机制
Jun 19 Javascript
js自定义鼠标右键的实现原理及源码
Jun 23 Javascript
JavaScript的各种常见函数定义方法
Sep 16 Javascript
JavaScript极简入门教程(三):数组
Oct 25 Javascript
理解Angular数据双向绑定
Jan 10 Javascript
原生JavaScript实现Tooltip浮动提示框特效
Mar 07 Javascript
Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结
May 28 Javascript
js简单的分页器插件代码实例
Sep 11 Javascript
vue3 源码解读之 time slicing的使用方法
Oct 31 Javascript
在vue中阻止浏览器后退的实例
Nov 06 Javascript
再也不怕 JavaScript 报错了,怎么看怎么处理都在这儿
Dec 09 Javascript
vue实现树状表格效果
Dec 29 Vue.js
javascript 24小时弹出一次的代码(利用cookies)
Sep 03 #Javascript
使用jQuery的ajax功能实现的RSS Reader 代码
Sep 03 #Javascript
一步一步教你写一个jQuery的插件教程(Plugin)
Sep 03 #Javascript
动态样式类封装JS代码
Sep 02 #Javascript
JS URL传中文参数引发的乱码问题
Sep 02 #Javascript
FF IE兼容性的修改小结
Sep 02 #Javascript
js 获取浏览器高度和宽度值(多浏览器)
Sep 02 #Javascript
You might like
Php中文件下载功能实现超详细流程分析
2012/06/13 PHP
关于JSON以及JSON在PHP中的应用技巧
2013/11/27 PHP
ThinkPHP3.2.3实现分页的方法详解
2016/06/03 PHP
php面向对象的用户登录身份验证
2017/06/08 PHP
laravel5.1框架model类查询的实现方法
2019/10/08 PHP
js兼容标准的表格变色效果
2008/06/28 Javascript
javascript学习笔记(十) js对象 继承
2012/06/19 Javascript
JS判定是否原生方法
2013/07/22 Javascript
jQuery Ajax异步处理Json数据详解
2013/11/05 Javascript
详解Bootstrap按钮
2016/01/04 Javascript
使用PHP+JavaScript将HTML页面转换为图片的实例分享
2016/04/18 Javascript
jQuery选择器及jquery案例详解(必看)
2016/05/20 Javascript
jquery获取input type=text中的值的各种方式(总结)
2016/12/02 Javascript
jquery Form轻松实现文件上传
2017/05/24 jQuery
浅谈Angular2 ng-content 指令在组件中嵌入内容
2017/08/18 Javascript
详解javascript设计模式三:代理模式
2019/03/25 Javascript
js实现简单的日历显示效果函数示例
2019/11/25 Javascript
JQuery样式与属性设置方法分析
2019/12/07 jQuery
js实现表单项的全选、反选及删除操作示例
2020/06/05 Javascript
vue-simple-uploader上传成功之后的response获取代码
2020/09/07 Javascript
python生成随机验证码(中文验证码)示例
2014/04/03 Python
利用标准库fractions模块让Python支持分数类型的方法详解
2017/08/11 Python
python实现机器人行走效果
2018/01/29 Python
python 对dataframe下面的值进行大规模赋值方法
2018/06/09 Python
Python 查看list中是否含有某元素的方法
2018/06/27 Python
python调用c++ ctype list传数组或者返回数组的方法
2019/02/13 Python
对Python定时任务的启动和停止方法详解
2019/02/19 Python
利用css3实现的简单的鼠标悬停按钮
2014/11/04 HTML / CSS
计算机应用专业毕业生求职信
2013/10/24 职场文书
写给女生的道歉信
2014/01/14 职场文书
本科毕业生专业自荐书范文
2014/02/05 职场文书
2014年生活老师工作总结
2014/12/23 职场文书
给领导的感谢信范文
2015/01/23 职场文书
2016自主招生校长推荐信范文
2015/03/23 职场文书
深入理解python多线程编程
2021/04/18 Python
JavaScript实现简单图片切换
2021/04/29 Javascript