快捷導(dǎo)航

javascript textarea光標(biāo)定位方法(兼容IE和FF)

更新時(shí)間：2011年03月12日 13:17:07 作者：

主要是實(shí)現(xiàn)textarea中光標(biāo)的定位方法，考慮到多瀏覽器的兼容性，需要的朋友可以參考下。

今天在做一個(gè)博客轉(zhuǎn)發(fā)的功能，就像新浪微薄轉(zhuǎn)播的那個(gè)功能一樣，有一個(gè)textArea,就是我們發(fā)微薄的那個(gè)框，別人的微薄都有一個(gè)轉(zhuǎn)發(fā)的按鈕，當(dāng)我們點(diǎn)擊這個(gè)轉(zhuǎn)發(fā)按鈕的時(shí)候，他的微薄就會進(jìn)入到textArea中，看起來很簡單的文本框賦值，其實(shí)難點(diǎn)就在于，這時(shí)候的光標(biāo)是定位在最前面的。

于是搜索了baidu,google,找到了
IE下面的方法

復(fù)制代碼代碼如下:

 
var tea=document.getElementById("文本框的ID"); 
var txt=textArea.createTextRange(); 
txt.moveEnd("character",0-tempText.text.length); 
txt.select(); 

但是這個(gè)方法只有在IE的瀏覽器下面才可用，于是通過網(wǎng)絡(luò)搜索找到了一篇博客
google了N久，嘗試了各種方法，大多不是不支持IE就是IE ONLY，最終師父告訴我一個(gè)老頁面里面有這個(gè)功能，找到那段代碼試了下,IE和FF都成功了！
共享一下代碼

復(fù)制代碼代碼如下:

 
function locatePoint(){ 
var aCtrl = document.getElementById("txtContent"); 
if (aCtrl.setSelectionRange) { 
setTimeout(function() { 
aCtrl.setSelectionRange(0, 0); //將光標(biāo)定位在textarea的開頭，需要定位到其他位置的請自行修改 
aCtrl.focus(); 
}, 0); 
}else if (aCtrl.createTextRange) { 
var textArea=document.getElementById("txtContent"); 
var tempText=textArea.createTextRange(); 
tempText.moveEnd("character",0-tempText.text.length); 
tempText.select(); 
} 
} 

找到了FF下面的方法

復(fù)制代碼代碼如下:

 
var tea=document.getElementById("文本框的ID"); 
tea.setSelectionRange(0, 0); //將光標(biāo)定位在textarea的開頭，需要定位到其他位置的請自行修改 
tea.focus(); 

所以兼容的方法我們可以用一個(gè)if加入判斷，整合方法如下，也正如那個(gè)帖子里的一樣
html部分

復(fù)制代碼代碼如下:

 
<input id="tea" type="text" size="100" value=""> 
<button onclick="xx()">轉(zhuǎn)發(fā)</button> 

JS部分

復(fù)制代碼代碼如下:

 
<script language="javascript"> 
var tea = document.getElementById("tea"); 
function locatePoint(){ 
if (tea.setSelectionRange) { 
setTimeout(function() { 
tea.setSelectionRange(0, 0); //將光標(biāo)定位在textarea的開頭，需要定位到其他位置的請自行修改 
tea.focus(); 
}, 0); 
}else if (tea.createTextRange) { 
var txt=tea.createTextRange(); 
txt.moveEnd("character",0-txt.text.length); 
txt.select(); 
} 
} 
function xx(){ 
tea.value = 'bbb'; 
locatePoint(); 
} 
</script> 