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

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

더보기

인기 기사

R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)

2 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌

Repo : 팀원을 부활시키는 방법

1 몇 달 전 By 尊渡假赌尊渡假赌尊渡假赌

헬로 키티 아일랜드 어드벤처 : 거대한 씨앗을 얻는 방법

1 몇 달 전 By 尊渡假赌尊渡假赌尊渡假赌

스플릿 소설을이기는 데 얼마나 걸립니까?

4 몇 주 전 By DDD

R.E.P.O. 파일 저장 위치 : 어디에 있고 그것을 보호하는 방법은 무엇입니까?

4 몇 주 전 By DDD

더보기

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

더보기

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7360

15

자바 튜토리얼

1628

14

Cakephp 튜토리얼

1353

52

라라벨 튜토리얼

1265

25

PHP 튜토리얼

1214

29

더보기