> 웹 프론트엔드 > JS 튜토리얼 > js(호환성이 매우 높음)_javascript 기술로 캡슐화된 텍스트 영역 작업 방법 모음

js(호환성이 매우 높음)_javascript 기술로 캡슐화된 텍스트 영역 작업 방법 모음

WBOY
풀어 주다: 2016-05-16 18:16:16
원래의
1126명이 탐색했습니다.

지금은 쓸모없어 보이고 필요할 때마다 정보를 여기저기서 찾아보겠지만 지금 수집하는 편이 나을 것입니다.

DOM에서 텍스트 영역의 문자를 조작하는 것은 번거롭습니다.

이 패키지는 IE6,8, Firefox, Chrome, Opera 및 Safari에서 테스트되었습니다. 호환성에는 문제가 없습니다.

참고: Firefox에서 문자열을 추가할 때 버그가 있습니다. 즉, scrollTop이 0이 됩니다. 물론 해결되었지만 완벽하지는 않습니다. 혹시 연구해 보신 전문가 있으시면 조언 부탁드립니다.

코드 복사 코드는 다음과 같습니다.

var TT = {
/*
* 커서 위치 가져오기
* @Method getCursorPosition
* @param t 요소
* @return 번호
*/
getCursorPosition: function(t){
if (문서 .selection) {
t.focus();
var ds = document.selection;
var range = ds.createRange()
var Stored_range = range.duplicate(); Stored_range.moveToElementText (t);
stored_range.setEndPoint("EndToEnd", range);
t.selectionStart = selected_range.text.length - range.text.length = t.selectionStart; range.text .length;
return t.selectionStart;
} else return t.selectionStart
},
/*
* 커서 위치 설정
* @Method setCursorPosition
* @param t 요소
* @param p 번호
* @return
*/
setCursorPosition:function(t, p){
this.sel(t,p,p);
},
/*
* 커서 뒤에 삽입
* @Method add
* @param t element
* @param txt String
* @return
*/
add:function (t, txt){
var val = t.value;
if(document.selection){
t.focus()
document.selection.createRange ().text = txt;
} else {
var cp = t.selectionStart;
var ubbLength = t.value.length;
// document.getElementById ('aaa').innerHTML = s '
'
t.value = t.value.slice(0,t.selectionStart) txt t.value.slice(t.selectionStart) , ubbLength) ;
this.setCursorPosition(t, cp txt.length)
// document.getElementById('aaa').innerHTML = t.scrollTop '
'; firefox=navigator .userAgent.toLowerCase().match(/firefox/([d.] )/) && setTimeout(function(){
if(t.scrollTop != s) t.scrollTop=s;
}, 0)
};
},
/*
* 커서 앞이나 뒤의 n 문자 삭제
* @Method del
* @param t 요소
* @ param n 숫자 n>0 다음에 n* @return
* 값을 재설정하면 scrollTop 값이 0으로 지워집니다.
*/
del:function (t, n){
var p = this.getCursorPosition(t);
var s = t.scrollTop;
var val = t.value = n > ? val.slice(0 , p - n) val.slice(p):
val.slice(0, p) val.slice(p - n)
this.setCursorPosition(t ,p - ( n firefox=navigator.userAgent.toLowerCase().match(/firefox/([d.] )/) && setTimeout(function(){
if(t .scrollTop != s) t.scrollTop=s;
},10)
},
/*
* s에서 z 위치까지 텍스트 선택
* @Method sel
* @param t 요소
* @param s 번호
* @param z 번호
* @return
*/
sel:function(t, s, z){
if(document.selection){
var range = t.createTextRange();
range.moveEnd('character', -t.value.length)
range.moveEnd('character', z );
range.moveStart('character', s);
range.select()
}else{
t.setSelectionRange(s,z); );
}
},
/*
* 문자열 선택
* @Method sel
* @param t 요소
* @param s 문자열
* @return
* /
selString:function(t, s){
var index = t.value.indexOf(s)
index != -1 ? , 인덱스 s.length) : false
}
}

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿