快捷導(dǎo)航

js TextArea的選中區(qū)域處理

更新時(shí)間：2010年12月28日 23:30:40 作者：

js中對(duì)于TextArea的選中區(qū)域后進(jìn)行處理的代碼，需要的朋友可以參考下。

（一）獲取Textarea的選中區(qū)域起點(diǎn)或無(wú)選中時(shí)的輸入光標(biāo)位置
　　非IE瀏覽器，如，firefox，chrome，支持 selectionStart 獲取選中區(qū)域的起點(diǎn)，而IE瀏覽器不支持該屬性，需要間接通過(guò)TextRange來(lái)獲得，利用TextRange對(duì)象的compareEndPoints方法來(lái)進(jìn)行起點(diǎn)的比較可以實(shí)現(xiàn)。

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

 
getStartPos : function( textarea ) 
{ 
if ( typeof textarea.selectionStart != 'undefined' ) 
{ // 非IE 
start = textarea.selectionStart; 
} 
else 
{ // IE 
var range = document.selection.createRange(); 
var range_textarea = document.body.createTextRange(); 
range_textarea .moveToElementText(textarea); 
//比較start point 
for ( var sel_start = 0; range_textarea .compareEndPoints('StartToStart' , range) < 0; sel_start++) 
range_textarea .moveStart( 'character', 1); 
start = sel_start; 
} // else 

return start; 
} 

　　但有點(diǎn)需要注意的是，在chrome下，如果textarea設(shè)為readonley，那textarea不會(huì)出現(xiàn)輸入光標(biāo)，返回的selectionStart與selectionEnd都為0.firefox下則正常。

（二）設(shè)置Textarea中選中的區(qū)域
　　類(lèi)似的，非IE的瀏覽器支持setSelectionRange方法指定選中的字符范圍，而IE不支持，也是通過(guò)TextRange來(lái)操作,這里需要注意的是IE下Textarea的選中區(qū)間的相對(duì)位置問(wèn)題。如下面的代碼是先moveStart,moveEnd把起點(diǎn)與終點(diǎn)都設(shè)為0，collapse移動(dòng)生效后，起點(diǎn)不變，先moveEnd移動(dòng)區(qū)間的終點(diǎn)，再moveStart移動(dòng)區(qū)間的起點(diǎn)，在沒(méi)有改變起點(diǎn)point之前,可以保證相對(duì)位置不變，更容易理解些。

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

 
　　 /** 
* 設(shè)置textarea的選中區(qū)域 
*/ 
setSelectRange : function( textarea, start, end ) 
{ 
if ( typeof textarea.createTextRange != 'undefined' )// IE 
{ 
var range = textarea.createTextRange(); 
// 先把相對(duì)起點(diǎn)移動(dòng)到0處 
range.moveStart( "character", 0) 
range.moveEnd( "character", 0); 
range.collapse( true); // 移動(dòng)插入光標(biāo)到start處 
range.moveEnd( "character", end); 
range.moveStart( "character", start); 
range.select(); 
} // if 
else if ( typeof textarea.setSelectionRange != 'undefined' ) 
　{ 
　　 textarea.setSelectionRange(start, end); 
　　 textarea.focus(); 
　} // else 
　　　} 

實(shí)現(xiàn)了選中區(qū)域獲取及設(shè)置方法后，其他如文字插入，替換的實(shí)現(xiàn)就比較簡(jiǎn)單了。

您可能感興趣的文章:

相關(guān)文章

一個(gè)用js實(shí)現(xiàn)過(guò)濾重復(fù)字符的函數(shù)
一個(gè)用js實(shí)現(xiàn)過(guò)濾重復(fù)字符的函數(shù)...
2007-08-08
bootstrap fileinput插件實(shí)現(xiàn)預(yù)覽上傳照片功能
這篇文章主要介紹了bootstrap fileinput插件實(shí)現(xiàn)預(yù)覽上傳照片功能,代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2018-01-01
js獲取當(dāng)前日期時(shí)間及其它操作匯總
Js獲取當(dāng)前日期時(shí)間及其它操作，還有一些自己常用的方法，很好用，也很全。這里推薦給大家，有需要的小伙伴可以參考下。
2015-04-04
for循環(huán) + setTimeout 結(jié)合一些示例(前端面試題）
最近在學(xué)習(xí)node.js開(kāi)發(fā)資料，正好碰到了for循環(huán)+settimeout的經(jīng)典例子，下面小編給大家分享for循環(huán) + setTimeout 結(jié)合一些示例代碼，需要的朋友參考下吧
2017-08-08
uniapp打包成微信小程序的詳細(xì)過(guò)程
微信小程序的出現(xiàn)給我們提供了一種使用應(yīng)用的新方式和體驗(yàn),下面這篇文章主要給大家介紹了關(guān)于uniapp打包成微信小程序的相關(guān)資料,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下
2022-07-07
JavaScript將對(duì)象數(shù)組按字母順序排序的方法詳解
這篇文章主要介紹了JavaScript如何將對(duì)象數(shù)組按字母順序排序，本文介紹了三種解決方案，if條件語(yǔ)句 + sort()，localeCompare() + sort()，Collator() + sort()，有感興趣的同學(xué)可以跟著小編一起來(lái)看看
2023-07-07
模仿password輸入框的實(shí)現(xiàn)代碼
下面小編就為大家?guī)?lái)一篇模仿password輸入框的實(shí)現(xiàn)代碼。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-06-06
原生JavaScript實(shí)現(xiàn)幻燈片效果
這篇文章主要為大家詳細(xì)介紹了原生JavaScript實(shí)現(xiàn)幻燈片效果，文中安裝步驟介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-02-02
javascript中負(fù)數(shù)算術(shù)右移、邏輯右移的奧秘探索
javascript中負(fù)數(shù)的算術(shù)右移和邏輯右移都十分的讓人迷惑，特別是邏輯右移，接下來(lái)的文章中將為大家詳細(xì)介紹下為什么右移之后，一個(gè)很小的負(fù)數(shù)也會(huì)得到一個(gè)無(wú)比巨大的數(shù)
2013-10-10
JavaScript中數(shù)組雙重去重的方法總結(jié)
這篇文章主要為大家學(xué)習(xí)介紹了JavaScript中數(shù)組雙重去重的幾個(gè)常用方法，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2023-07-07