Weibo에서 @ 기호의 사용자 이름 프롬프트 효과. (누구를 생각하고 계시나요?)

효과를 보려면 아래 텍스트 상자에 "@"를 입력하세요!

IE, FF, CHORME 주류 브라우저와의 호환성 문제가 해결되었습니다. 이 JS가 필요한 친구들은 직접 사용할 수 있습니다.

정말 이 글에 이런 효과를 넣을 수가 없거든요. 그래서 제가 시연한 파일만 모든 사람이 다운로드하도록 할 수 있습니다.

데모 파일 다운로드

아이디어

onkeyup 이벤트를 사용하여 텍스트 상자에 @ 기호가 입력되었는지 모니터링할 수 있습니다. 그렇다면 페이지에서 @ 기호의 절대 위치를 찾아 프롬프트가 표시됩니다. (실제 제작 과정에서 다양한 문제가 발생합니다)

문제: 텍스트 영역의 커서 위치를 직접 얻을 수 없습니다.

그래서 우리는 우회적으로만 앞으로 나아갈 수 있습니다.

팝업박스 위치 결정

먼저 웹페이지의 textarea 태그(매우 귀찮은 태그)에 대해 몇 가지 작업을 수행합니다.

따라서 그의 API 중 일부를 수집해야 합니다. (아래 제공)

A: 텍스트 영역입니다

B:현재 커서 위치

우리의 계획은 먼저 페이지에 visible:hidden(자리 표시자이지만 표시되지 않음) 속성이 있는 (C) DIV를 만드는 것입니다.

위치, 너비, 높이는 A 텍스트 상자와 동일합니다(이제 C와 A가 겹치는 것을 의미함).

그런 다음 위치 B(js로 얻을 수 있음) 이전의 모든 텍스트를 가져와서 C에 쓰고 ;을 추가합니다.

그러면 ID가 FFF인 스팬 태그의 위치가 B의 위치가 됩니다.

HTML 페이지에는 다음과 같은 추가 태그가 있습니다.

This is a textarea @

@ 기호의 위치를 알 수 있습니다. 다른 문제는 디버깅 문제이므로 자세히 설명하지 않겠습니다. 소스 코드를 직접 다운로드할 수 있습니다

텍스트 영역의 일부 작업

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

 /* 
* TT 텍스트 영역 연산 기능
* info(t) 기본 정보
* getCursorPosition(t) 커서 위치
* setCursorPosition(t, p) 커서 위치 설정
* add(t ,txt) 커서 위치에 내용 추가 
*/ 
var TT = { 
info:function(t){ 
var o = t.getBoundingClientRect() 
var w = t.offsetWidth; 
var h = t.offsetHeight; 
return {top:o.top, left:o.left, width:w, height:h}, 
getCursorPosition: function( t){ 
if (document.selection) { 
t.focus(); 
var ds = document.selection; 
var range = null; range = ds.createRange() ; 
var selected_range = range.duplicate(); 
stored_range.moveToElementText(t); 
stored_range.setEndPoint("EndToEnd", range); = 저장된_범위.텍스트.길이 - 범위.텍스트.길이; 
t.selectionEnd = t.selectionStart range.text.length; 
return t.selectionStart; 
} else return t.selectionStart 
} , 
setCursorPosition:function (t, p){ 
var n == 'end' ? t.value.length : p 
if(document.selection){ 
var range = t.createTextRange(); 
range.moveEnd('character', -t.value.length) 
range.moveEnd('character', n) 
range.moveStart('character', n); 
범위 .select(); 
}else{ 
t.setSelectionRange(n,n) 
t.focus(); >add:function (t, txt){ 
var val = t.value; 
var Wrap = Wrap '' 
if(document.selection){ 
document.selection.createRange ().text = txt; 
} else { 
var cp = t.selectionStart; 
var ubbLength = t.value.length; t.selectionStart) txt t.value.slice(t.selectionStart, ubbLength); 
this.setCursorPosition(t, cp txt.length) 
}, 
del:function( t, n){ 
var p = this.getCursorPosition(t); 
var s = t.scrollTop; 
t.value = t.value.slice(0,p - n) t.value .slice(p); 
this.setCursorPosition(t ,p - n); 
D.FF && setTimeout(function(){t.scrollTop = s},10) 
} 
 } 

 
메인 JS 




코드 복사

코드는 다음과 같습니다

 
var AutoTips = function(A){ 
var elem = A.id ? D.$(A.id) : A.elem; 
var checkLength = 5; 
var _this = {}; 
var 키 = ''; 
_this.start = function(){ 
if(!D.$(config.boxID)){ 
var h = html.slice(); 
var info = TT.info(elem); 
var div = D.DC('DIV'); 
var bs = D.BS(); 
h = h.replace('$top$',(info.top bs.top)). 
replace('$left$',(info.left bs.left)). 
('$width$',info.width)를 바꿉니다. 
('$height$',info.height)를 바꿉니다. 
replace('$SCTOP$','0'); 
div.innerHTML = h; 
document.body.appendChild(div); 
}else{ 
_this.updatePosstion(); 
} 
} 
_this.keyupFn = function(e){ 
var e = e || 창.이벤트; 
var code = e.keyCode; 
if(코드 == 38 || 코드 == 40 || 코드 == 13) { 
if(code==13 && D.$(config.wrap).style.display != '없음' ){ 
_this.enter(); 
} 
false를 반환합니다. 
} 
var cp = TT.getCursorPosition(elem); 
if(!cp) return _this.hide(); 
var valuep = elem.value.slice(0, cp); 
var val = valuep.slice(-checkLength); 
var chars = val.match(/(w )?@(w )$|@$/); 
if(chars == null) return _this.hide(); 
var char = chars[2] ? 문자[2] : ''; 
D.$(config.valuepWrap).innerHTML = valuep.slice(0,valuep.length - char.length).replace(/n/g,'
'). 
대체(/s/g,' ') config.positionHTML; 
_this.showList(char); 
} 
_this.showList = function(char){ 
key = char; 
var data = DS.inquiry(friendsData, char, 5); 
var html = listHTML.slice(); 
var h = ''; 
var len = 데이터.길이; 
if(len == 0){_this.hide();return;} 
var reg = new RegExp(char); 
var em = ''  char ''; 
for(var i=0; ivar hm = data[i]['user'].replace(reg,em); 
h = html.replace(/$ACCOUNT$|$NAME$/g,data[i]['name']). 
replace('$SACCOUNT$',hm).replace('$ID$',data[i]['user']); 
} 
_this.updatePosstion(); 
var p = D.$(config.position).getBoundingClientRect(); 
var bs = D.BS(); 
var d = D.$(config.wrap).style; 
d.top = p.top 20 bs.top 'px'; 
d.left = p.left - 5 'px'; 
D.$(config.listWrap).innerHTML = h; 
_this.show(); 
} 

_this.KeyDown = function(e){ 
var e = e || 창.이벤트; 
var code = e.keyCode; 
if(코드 == 38 || 코드 == 40 || 코드 == 13){ 
return selectList.selectIndex(code); 
} 
true를 반환합니다. 
} 
_this.updatePosstion = function(){ 
var p = TT.info(elem); 
var bs = D.BS(); 
var d = D.$(config.boxID).style; 
d.top = p.top bs.top 'px'; 
d.left = p.left bs.left 'px'; 
d.width = p.width 'px'; 
d.height = p.height 'px'; 
D.$(config.boxID).scrollTop = elem.scrollTop; 
} 
_this.show = function(){ 
selectList.list = D.$(config.listWrap).getElementsByTagName('li'); 
selectList.index = -1; 
selectList._this = _this; 
_this.cursorSelect(selectList.list); 
elem.onkeydown = _this.KeyDown; 
D.$(config.wrap).style.display = '차단'; 
} 
_this.cursorSelect = 함수(목록){ 
for(var i=0; ilist[i].onmouseover = (함수(i) { 
반환 함수(){selectList.setSelected(i)} 
})(i); 
목록[i].onclick = _this.enter; 
} 
} 
_this.hide = function(){ 
selectList.list = null; 
selectList.index = -1; 
selectList._this = null; 
D.ER(elem, 'keydown', _this.KeyDown); 
D.$(config.wrap).style.display = '없음'; 
} 
_this.bind = function(){ 
elem.onkeyup = _this.keyupFn; 
elem.onclick = _this.keyupFn; 
elem.onblur = function(){setTimeout(_this.hide, 100)} 
//elem.onkeyup= fn; 
//D.EA(elem, 'keyup', _this.keyupFn, false) 
//D.EA(elem, 'keyup', fn, false) 
//D.EA(elem , '클릭', _this.keyupFn, false); 
//D.EA(elem, 'blur', function(){setTimeout(_this.hide, 100)}, false); 
} 
_this.enter = function(){ 
TT.del(elem, key.length, key); 
TT.add(elem, selectList.list[selectList.index].getElementsByTagName('A')[0].rel ' '); 
_this.hide(); 
거짓을 반환합니다. 
} 
return _this; 
} 

작자:idche

Weibo에서 @ 기호의 사용자 이름 프롬프트 효과. (누구를 생각하고 계시나요?)_자바스크립트 실력