欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2011年03月12日 13:17:07   作者:  
主要是實現(xiàn)textarea中光標的定位方法,考慮到多瀏覽器的兼容性,需要的朋友可以參考下。
今天在做一個博客轉發(fā)的功能,就像新浪微薄轉播的那個功能一樣,有一個textArea,就是我們發(fā)微薄的那個框,別人的微薄都有一個轉發(fā)的按鈕,當我們點擊這個轉發(fā)按鈕的時候,他的微薄就會進入到textArea中,看起來很簡單的文本框賦值,其實難點就在于,這時候的光標是定位在最前面的。

于是搜索了baidu,google,找到了
IE下面的方法
復制代碼 代碼如下:

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

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

function locatePoint(){
var aCtrl = document.getElementById("txtContent");
if (aCtrl.setSelectionRange) {
setTimeout(function() {
aCtrl.setSelectionRange(0, 0); //將光標定位在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下面的方法
復制代碼 代碼如下:

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

所以兼容的方法我們可以用一個if加入判斷,整合方法如下,也正如那個帖子里的一樣
html部分
復制代碼 代碼如下:

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

JS部分
復制代碼 代碼如下:

<script language="javascript">
var tea = document.getElementById("tea");
function locatePoint(){
if (tea.setSelectionRange) {
setTimeout(function() {
tea.setSelectionRange(0, 0); //將光標定位在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>

相關文章

  • 原生javascript實現(xiàn)連連看游戲

    原生javascript實現(xiàn)連連看游戲

    這篇文章主要為大家詳細介紹了原生javascript實現(xiàn)連連看游戲,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2019-01-01
  • Js獲取當前日期時間及格式化代碼

    Js獲取當前日期時間及格式化代碼

    這篇文章主要為大家詳細介紹了Js獲取當前日期時間及格式化代碼,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-09-09
  • taro開發(fā)微信小程序的實踐

    taro開發(fā)微信小程序的實踐

    這篇文章主要介紹了taro開發(fā)微信小程序的實踐,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2019-05-05
  • 九種js彈出對話框的方法總結

    九種js彈出對話框的方法總結

    九種js彈出對話框的方法總結,需要的朋友可以參考一下
    2013-03-03
  • JavaScript檢測上傳文件大小的方法

    JavaScript檢測上傳文件大小的方法

    這篇文章主要介紹了JavaScript檢測上傳文件大小的方法,涉及javascript針對上傳文件的相關判定技巧,具有一定參考借鑒價值,需要的朋友可以參考下
    2015-07-07
  • 理解JavaScript中worker事件api

    理解JavaScript中worker事件api

    這篇文章主要幫助大家理解JavaScript中worker事件api,對worker事件api有一個深刻了解,感興趣的小伙伴們可以參考一下
    2015-12-12
  • canvas濾鏡效果實現(xiàn)代碼

    canvas濾鏡效果實現(xiàn)代碼

    這篇文章主要為大家詳細介紹了canvas濾鏡效果的實現(xiàn)代碼,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-02-02
  • ionic2自定義cordova插件開發(fā)以及使用(Android)

    ionic2自定義cordova插件開發(fā)以及使用(Android)

    這篇文章主要為大家詳細介紹了ionic2自定義cordova插件開發(fā)以及使用,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-06-06
  • JS獲取父節(jié)點方法

    JS獲取父節(jié)點方法

    在Web應用程序特別是Web2.0程序開發(fā)中,經常要獲取頁面中某個元素,然后更新該元素的樣式、內容等。
    2009-08-08
  • js與css實現(xiàn)彈出層覆蓋整個頁面的方法

    js與css實現(xiàn)彈出層覆蓋整個頁面的方法

    這篇文章主要介紹了js與css實現(xiàn)彈出層覆蓋整個頁面的方法,分別以實例形式展示了彈出層覆蓋整個頁面的css樣式與js控制的實現(xiàn)技巧,非常具有實用價值,需要的朋友可以參考下
    2014-12-12

最新評論