필요하다
1. @를 입력하면 일치하는 친구 메뉴가 나타납니다.
2. 커서가 "@friends"가 포함 된 태그에 들어가면 메뉴가 나타납니다.
3. 백 스페이스를 삭제하도록 눌러 삭제할 때 커서가 "@friends"가 포함 된 태그의 앞면에 있으면 메뉴가 나타납니다.
4. IE, Firefox와 호환됩니다.
특정 관행
요구 사항 1의 경우 입력 상자에 이벤트를 바인딩하는 것이 당연합니다. 여기에서 마우스 업이 아니라 마우스 딩을 묶어야합니다. 마우스 업이면 event.preventDefault ()를 사용하여 키보드가 @에 들어가는 것을 방지 할 수 없습니다. 또한 이벤트에서 return false를 사용하면 콜백이 작동하지 않습니다.
Mousedown 이벤트를 바인딩 한 후 "@friends"가 포함 된 사용자 정의 태그를 삽입해야합니다. Sina Weibo의 입력 상자는 Textarea로 만들어졌습니다. 내부적으로 어떻게 처리되는지 알 수 없으므로 Baidu Tieba를 읽어야합니다.
<span class = 'at'at '> </span> 태그가 포스트 바에 삽입되었음을 알 수 있습니다. 이것은 정규식과 일치하는 배경에 편리해야합니다.
특정한
코드 사본은 다음과 같습니다.
vm.check_key = function (e) {
var editor = $ ( '편집기'), 범위;
if (e.shiftkey && e.keycode == 50) {
if (document.Selection && document.Selection.CreateRange) {
범위 = document.selection.createrange ();
range.pastehtml ( "<span id = 'at"+at_index+"'class = 'at_span'>@</span>");
}또 다른{
document.execcommand ( "inserthtml", false, "<span id = 'at"+at_index+"'class = 'at_span'>@</span>");
}
e.preventDefault ();
}
};
커서에 삽입이 필요하므로 범위가 사용됩니다.
그런 다음 메뉴가 표시되고 키는 위치를 배치하는 방법입니다. 내 접근 방식은 매우 쓰레기이며 삽입 된 스팬에 ID를 추가 한 다음 SPAN ID의 위치에 따라 메뉴를 찾는 것입니다. 더 나은 방법이 있다면 알려주십시오.
특정한
코드 사본은 다음과 같습니다.
함수 at_box_show (at) {
var at_pos = avalon ($ (at)). position ();
$ ( 'at_box'). style.left = at_pos.left+'px';
$ ( 'at_box'). style.top = at_pos.top+16+'px';
$ ( 'at_box'). style.display = 'block';
}
var at_index = 0, cur_index = 0;
avalon.define ( '편집기', function (vm) {
vm.item_click = function () {
$ ( 'at'+cur_index) .innerhtml = "@"+this.innerhtml;
$ ( 'at_box'). style.display = 'none';
at_index ++;
};
vm.check_key = function (e) {
var editor = $ ( 'editor'), a = getCharacterPrecedingCaret (편집기), 범위;
if (e.shiftkey && e.keycode == 50) {
if (document.Selection && document.Selection.CreateRange) {
범위 = document.selection.createrange ();
range.pastehtml ( "<span id = 'at"+at_index+"'class = 'at_span'>@</span>");
}또 다른{
document.execcommand ( "inserthtml", false, "<span id = 'at"+at_index+"'class = 'at_span'>@</span>");
}
at_box_show ( 'at'+at_index);
cur_index = at_index;
e.preventDefault ();
}
};
});
at_show_box는 새로 삽입 된 SPAN ID에 따라 at_box를 찾은 다음 메뉴를 표시합니다. cur_index는 커서가 현재 위치한 SPAN ID를 나타냅니다. 사용자가 삽입 된 스팬을 되 감고 변경할 수 있으므로이 변수를 설정하고 AT_Index가 지속적으로 증가하므로 여기에서 변수도 필요합니다.
사용자는 메뉴의 친구 항목을 클릭하여 item_click 콜백을 트리거합니다. 콜백에서 inserhtml을 사용하여 친구 이름을 현재 스팬에 추가하십시오. 그런 다음 메뉴를 숨 깁니다. at_index ++.
위의 내용은 Shift+@를 듣고 백 스페이스 삭제를 듣습니다.
코드 사본은 다음과 같습니다.
함수 getTextBeforeCursor (Containerel) {
var precedingchar = "", sel, 범위, precedingregange;
if (window.getSelection) {
sel = window.getSelection ();
if (sel.rangecount> 0) {
범위 = sel.getRangeat (0) .Clonerange ();
Range.collapse (true);
Range.SetStart (Containerel, 0);
precedchar = range.clonecontents ();
}
} else if ((sel = document.Selection)) {
범위 = sel.createrange ();
precedingRange = Range.Duplication ();
precedingRange.MovetoElementText (Containerel);
precedingRange.setendpoint ( "endtostart", 범위);
precedingchar = precedingRange.htmlText;
}
앞서 리턴;
}
getTextBeforeCursor의 기능은 커서 앞에 컨텐츠를 얻는 것입니다. 호환성으로 인해이 기능은 표준 브라우저의 커서 앞에있는 모든 컨텐츠 인 DocumentFragment를 얻을 수 있으며 즉, 텍스트 만 얻을 수 있습니다 (노드가 아님). 그러나이 HTML 문자열은 DocumentFragment로 변환 될 수 있습니다. Avalon에서는 parsehtml을 사용하여 HTML 문자열을 노드로 전환 할 수 있습니다. jQuery에서 $ (html) [0]를 사용하여 노드를 얻을 수도 있습니다.
이 기능을 사용하면 LastChild를 사용하여 커서가 커서 앞의 HTML의 LastChild에 있는지 여부를 결정할 수 있으며이 LastChild는 스팬입니다.
특정한
코드 사본은 다음과 같습니다.
var a = getTextBeforeCursor ($ ( 'editor'));
if (e.keyCode == 8) {
if (!-[1,]) {
var b = avalon.parsehtml (a) .lastchild;
}또 다른{
var b = a.lastchild;
}
if (b.nodetype == 1 && b.nodename == 'span') {
var id = b.id;
cur_index = b.id.substring (2);
at_box_show (b.id);
}또 다른
$ ( 'at_box'). style.display = 'none';
}
마지막으로 커서는 스팬 레이블을 입력하고 메뉴를 표시합니다. 이것은 분명히 마우스 이벤트를 바인딩해야합니다. Mouseup이 여기에 묶여 있습니다. Mousedown이 묶인 경우 메뉴를 표시하기 전에 Span 레이블의 마우스를 다시 클릭해야합니다. 원칙은 위와 유사합니다.
코드 사본은 다음과 같습니다.
vm.check_mouse = function (e) {
var editor = $ ( 'editor'), a = getTextBeforeCursor (편집기);
if (!-[1,]) {
var b = avalon.parsehtml (getTextBeforeCursor (편집자)). LastChild;
}또 다른{
var b = a.lastchild;
}
if (b! = null && b.nodetype == 1 && b.nodename == 'span') {
var id = b.id;
cur_index = b.id.substring (2);
at_box_show (b.id);
}또 다른
$ ( 'at_box'). style.display = 'none';
};
커서가 스팬에 있으면 제거해야하며 at_box는이 ID에 따라 배치되어야하며 CUR_INDEX를 재설정해야합니다.
Ajax 업데이트 메뉴는 캐릭터 일치하지 않습니다.
효과
파이어 폭스
IE8
IE7
IE6
다운로드
위는이 기사에 설명 된 모든 내용입니다. 모든 사람이 JavaScript를 이해하는 것이 도움이되기를 바랍니다.