ie focus bug 解決方法
更新時(shí)間：2009年09月03日 17:27:05 作者：
在IE中，新創(chuàng)建的input沒有如預(yù)期的獲得焦點(diǎn)。
如果把input.focus()放在一個(gè)setTimeout中延時(shí)執(zhí)行，則就可以獲得焦點(diǎn)。
<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、另一個(gè)例子</h2>
<p><input type="text" id="input" value=""/><span id="preview"></span></p>
復(fù)制代碼 代碼如下:
<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、另一個(gè)例子</h2>
<p><input type="text" id="input" value=""/><span id="preview"></span></p>
相關(guān)文章
如何設(shè)置iframe高度自適應(yīng)在跨域情況下的可用方法
iframe的高度需要根據(jù)子頁面的實(shí)際高度來進(jìn)行調(diào)整，但是如果子頁面不在同一域中怎么辦？這時(shí)候腳本沒有辦法獲取到子頁面的高度，存在JavaScript跨域的問題2013-09-09
JS組件Bootstrap實(shí)現(xiàn)圖片輪播效果
這篇文章主要為大家詳細(xì)介紹了JS組件Bootstrap實(shí)現(xiàn)圖片輪播效果的具體代碼，對圖片輪播效果感興趣的小伙伴們可以參考一下2016-05-05
javascript 閃爍的圣誕樹實(shí)現(xiàn)代碼
用js實(shí)現(xiàn)非常漂亮的帶閃爍效果的圣誕樹代碼。很佩服作者的想法。效果如下圖。2009-12-12
javascript下拉列表菜單的實(shí)現(xiàn)方法
這篇文章主要介紹了javascript下拉列表菜單的實(shí)現(xiàn)方法，采用table來封裝，我們知道table的每一行寫滿了之后，下一行會自動添加，文章末尾附有完整的代碼，需要的朋友可以參考下2015-11-11
這篇文章主要為大家詳細(xì)介紹了微信小程序progress組件的使用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-01-01
使用js實(shí)現(xiàn)數(shù)據(jù)格式化
這篇文章主要介紹了使用javascript實(shí)現(xiàn)數(shù)據(jù)格式化為字符串，非常的實(shí)用，這里推薦給有相同需求的小伙伴。2014-12-12
js實(shí)現(xiàn)不提交表單獲取單選按鈕值的方法
這篇文章主要介紹了js實(shí)現(xiàn)不提交表單獲取單選按鈕值的方法,涉及javascript鼠標(biāo)事件及頁面元素屬性操作的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08
這篇文章主要介紹了javascript獲取web應(yīng)用根目錄的方法,需要的朋友可以參考下2014-02-02
javascript代碼編寫需要注意的7個(gè)小細(xì)節(jié)小結(jié)
每種語言都有它特別的地方，對于JavaScript來說，使用var就可以聲明任意類型的變量，這門腳本語言看起來很簡單，然而想要寫出優(yōu)雅的代碼卻是需要不斷積累經(jīng)驗(yàn)的。本文利列舉了JavaScript初學(xué)者應(yīng)該注意的七個(gè)細(xì)節(jié)，與大家分享。2011-09-09
JavaScript數(shù)組reduce()方法使用實(shí)例詳解
reduce是數(shù)組原型對象上的一個(gè)方法，可以幫助我們操作數(shù)組。本文將和大家分享4個(gè)關(guān)于JavaScript中數(shù)組reduce的用法，希望對大家有所幫助2022-07-07