자바 스크립트는 TEXTAREA 요소의 커서 위치 코드를 가져옵니다.

웹 효과 얻을 TEXTAREA 요소의 커서 위치 코드

<! doctype html >
< html xmlns = "http://www.w3.org/1999/xhtml" >
< 헤드 >
< 메타 http-equiv = "content-type" 내용 = "text/html; charset = gb2312 "/ >
< 제목 > 데모: textarea 요소의 커서 위치 < / 타이틀 >
< 스타일 >
#result 없음
글꼴-크기: 18px;
라인-높이: 25px;
여백-왼쪽: 20px;
}
</스타일 >
</헤드 >

< 몸 >

< H1 > textarea 요소의 커서 위치 < / h 1 >
< ul >
< 리 > < /li > TEXTAREA 요소의 현재 커서 위치를 얻을
< 리 > 원래 TEXTAREA 요소 < /li > 다시 커서 위치 설정
TEXTAREA 요소 < /li >의 커서 위치에 텍스트를 삽입 하는 < 리 >
< /ul >

< 행동 양식 "#" = >
< 텍스트 영역 id = "테스트" 행 = "8" cols = ">< / 텍스트 영역 >"
< p >
< 입력 유형 = "버튼" id = "Get" 값 = "커서 위치를 얻을" / >
< 입력 유형 = "버튼" id = "설정된" 값 = "커서 위치 설정" / >
< 입력 유형 = "버튼" id = "추가" 값 = "커서 위치 후 텍스트 추가" / >
</p >
</양식 >

< h 2 > 텍스트 범위: < / h 2 >
< div id = "결과" >< / div >

< 스크립트 유형 = "텍스트/자바 스크립트" >

/**


* Cursorposition 개체


 *


* 2010/11/12에 빈 청에 의해 만들어진.


* 저작권 (c) planabc.net. 모든 권리 소유입니다.


 *


*이 파일의 내용을 구체화 하는 저작권 BSD (개정된) 오픈 소스 라이센스 하에 허용 된다.


 */


 


var cursorposition = {


get: 함수 (textarea) {


var rangedata = {텍스트: "", 시작: 0, 끝: 0};


 


경우 (textarea.setselectionrange) {//Consortium


Textarea.focus ();


rangedata.start= Textarea.selectionstart;


rangedata.end = textarea.selectionend;


Rangedata.text (Rangedata.start!= rangedata.end) =? Textarea.value.substring (Rangedata.start, Rangedata.end): "";


} 다른 면 (document.selection) {//IE


Textarea.focus ();


var i,


OS = Document.selection.createrange (),


돈 ' t: Textarea.createtextrange ()
= 또는

또는 Document.body.createtextrange (); =


Or.movetoelementtext (TEXTAREA);


  


rangedata.text = Os.text;


Rangedata.bookmark = Os.getbookmark ();


  


//Object.movestart (Sunit [, icount])


//Return 값: 정수 단위 이동의 수를 반환 합니다.

대 한
(나 = 0; or.compareendpoints ('Starttostart', OS) &lt; 0 &amp; &amp; Os.movestart ("문자",-1)! = = 0; i + +) {


//Why? (Textarea.value.length)
를 알릴 수 있습니다.

경우 (Textarea.value.charat (i) = 'n') {


나 + +;


    }


   }


Rangedata.start = i;


rangedata.end = rangedata.text.length + Rangedata.start;


  


경우 (! rangedata.text) {


   


   }


  }


 


반환 rangedata;


 },


 


세트: 기능 (텍스트, rangedata) {


var 또는;


경우 (! rangedata) {


경고 ("가져와야 합니다 커서 위치")


  }


Textarea.focus ();


경우 (textarea.setselectionrange) {//Consortium


Textarea.setselectionrange (Rangedata.start, rangedata.end);


} 다른 면 (Textarea.createtextrange) {//IE


또는 Textarea.createtextrange (); =


  


/ * //fixbug:ues MoveToBookmark ()


//In 인터넷 익스플로러, 커서 위치 텍스트 영역, setcursorposition 함수 돈 끝에 ' t 작업


경우 (textarea.value.length = = Rangedata.start) {


Or.collaps 튜토리얼 E (false)


Or.select ();


} else {


Or.movetobookmark (Rangedata.bookmark);


Or.select ();


   }*/


Or.movestart ('문자', Rangedata.start);


or.moveend ('문자', rangedata.end-textarea.value.length);


Or.select ();


  }


 },

추가: 기능 (텍스트, 텍스트, rangedata) {
var ovalue, Nvalue, 또는, Sr, Nstart, Nend, St;
T His.set (텍스트, rangedata);

경우 (textarea.setselectionrange) {//The 컨소시엄
ovalue = Textarea.value
& nbsp ; Nvalue = ovalue.substring (0, Rangedata.start) + 텍스트 + ovalue.substring (rangedata.end);
nstart = nend = Rangedata.start + text.length;
세인트 = textarea.scrolltop;
textarea.value nvalue; =
/ / fixbug:
//After textarea.values = Nvalue, scrolltop 값을 0
( Textarea.scrolltop!= St) {
textarea.scrolltop st;
=}
텍스트. Setselectionrange (Nstart, nend);
} 다른 면 (Textarea.createtextrange) {//IE
sr = Document.selection.createrange ();
& nbsp sr.text = 텍스트;
('Starttoend', SR); sr.setendpoint
SR.select ();
}
}
}

var Tx=document.getelementbyid ("테스트"),
Re=document.getelementbyid ("결과")
포스;

document.getElementById ("get"). onclick 함수 () 없음 =
경고 (tx.value.length);
pos = Cursorposition.get (TX);
Re.innerhtml= ("< 강한 > 범위: < / 강한 > (" + Pos.start + "," + Pos.end + ") < br / >< 강한 > 텍스트: & L T; / > "+ (! pos.text?) -': Pos.text);
}

document.getElementById ("집합"). onclick 함수 () 없음 =
Cursorposition.set (TX, POS);
}

document.getElementById ("추가"). onclick 함수 () 없음 =
Cursorposition.add (TX, pos, 입력 = 프롬프트 ("대체 텍스트를 삽입 하려면:", ""));
}
</스크립트 >

</바디 >
< / html >

첫째, 우리는 데이터를 저장 하 고 포커스 Rangedata 개체를 사용:

var rangedata = {시작: 0, 끝: 0, 텍스트: ""}; textarea.focus (); 비 IE 브라우저에 대 한 선택의 시작 및 끝 위치를 얻을 매우 쉽습니다:

rangedata.start= el.selectionstart;rangedata.end = El.selectionend;으로 우리가 얻을 수 있는 커서의 선택 차단:

Rangedata.text (Rangedata.start!= rangedata.end) =? El.value.substring (Rangedata.start, Rangedata.end): ""와 IE 브라우저 처리는 더 복잡 하지만 우리는 여전히 선택에 얻을 수:

OS = Document.selection.createrange (), 또한 다양 한 TEXTAREA 요소를 얻을 수 있습니다:

비교 또는 같은 수준에서 운영 체제를 사용 하지 마십시오: = Textarea.createtextrange () 또는 = Document.body.createtextrange (); Or.movetoelementtext ( TEXTAREA); TEXTAREA 요소 내에 커서가 있는 경우 자연스럽 게 os.text는 우리가 필요로 하는:

Rangedata.text = Os.text, 얻을 수 있습니다 선택의 위치 데이터는 Os.getbookmark () 메서드를 통해 데이터 MoveToBookmark () 메서드에 의해 다시 설정 될 수 있습니다.

Getbookmark:retrieves 수 있는 책갈피 (불투명 문자열) MoveToBookmark 동일한 범위에 사용 됩니다.

책갈피를 Movetobookmark:moves입니다.
위치 데이터를 기록 하기 위해 Rangedata.bookmark을 사용 합니다.

Rangedata.bookmark = Os.getbookmark (); 다음은 가장 중요 한 단계: 우리는 비교의 시작 위치 또는 운영 체제의 선택 (를 사용 하 여 Object.compareendpoints (Stype, 오렌지) 메서드 비교) 경우 시작의 위치 또는 이전 운영 체제, 운영 체제 1 문자의 시작 위치를 이동 하는 우리 (Object.movestart (Sunit [, Icount]) 메서드를 사용 하 여 전에 중지 되는 선택의 시작 위치는 운영 체제 시작 위치 또는, 위치 이동.

Compareendpoints:compares는-의 끝점은 다른 범위 TextRange 개체.

Movestart:changes 범위의 시작 위치.
대 한 (나 = 0; or.compareendpoints ('Starttostart', OS) < 0 & & Os.movestart ("문자",-1)! = = 0; i + +) {} rangeda Ta.start = i; 하지만 때문에 IE, 모든 줄 바꿈 문자를 TEXTAREA 요소에 1 문자, 수 볼 경고 (textarea.value.length), 그래서 위의 코드 부분 처리를:

대 한 (나 = 0; or.compareendpoints ('Starttostart', OS) < 0 & & Os.movestart ("문자",-1)! = = 0; i + +) {//W Hy?    경우 (textarea.value.length)를 알릴 수 있습니다 (Textarea.value.charat (i) = 'n') {i + +; }} rangedata.start = i; 때문에 우리는 선택의 시작 위치와 선택 문자열의 문자가 있어, 그것은 자연 선택의 끝 위치를 계산할 수 있다:

Rangedata.end = Rangedata.text.length + Rangedata.start;