JS를 사용하여 QQ 공간 댓글 응답 효과를 완벽하게 구현

댓글에 답하는 것은 매우 일반적인 일이지만, 각 주요 웹사이트마다 이를 구현하는 방식이 다릅니다. 일반적으로 두 가지 방법이 있습니다

1.

가장 일반적인 방법은 Youku와 마찬가지로 @입력창에 답글을 달고 싶은 사람을 입력하는 것입니다. , 이 방법으로 사용자는 @를 수정할 수 있습니다.

이를 바탕으로 시나 웨이보에서는 친구 메뉴가 팝업된다. 이 방법의 장점은 호환성을 위해 js 또는 css 처리가 필요하지 않다는 것입니다.

2.

QQ스페이스처럼 답글 주신 분들도 모두 삭제됩니다. 저는 이 방법이 더 낫다고 생각합니다만, 이 방법에는 몇 가지 호환성 세부 사항이 있으므로 나중에 자세히 설명하겠습니다.

실제로 QQ space 구현은 IE 및 최신 브라우저와 호환되며 매우 좋습니다. 위는 크롬

ie8

ie7

IE6에서는 사진이 안 올라와서 너무 느리다는 건 다들 아시겠지만 마지막에 예시를 첨부하겠습니다. 물론 IE6에서도 호환됩니다.

이를 달성하는 방법에 대해 이야기해 보겠습니다.

qq space가 어떻게 이루어지는지 먼저 살펴보겠습니다

chrome

위에서 볼 수 있듯이 , qq space 삭제시 회신한 사용자 이름 전체를 삭제할 수 있도록 버튼에 텍스트를 추가하는 것입니다.

그러나 이것만으로는 충분하지 않습니다. 첫 번째는 버튼을 인라인 블록으로 설정해야 합니다.

버튼의 기본 투명 배경과 테두리를 제거해야 합니다. padding과 margin을 0으로

button{ border: 0; background:none; }

이때 IE6, 7에서 insert를 해보면 padding이 있는 것 같으면서도 꽤 크다는 것을 알 수 있습니다

그래서 Overflow: visible;

추가로 contenteditable 속성이 false로 설정되어 있어야 합니다. 그렇지 않으면 커서가 버튼으로 이동합니다.

그러면 ie8 아래에 Enter 키가 있으면 삭제 프로세스 중에 버튼 라벨을 삭제할 수 없으며 커서가 버튼 라벨 앞으로 이동하고 오른쪽 커서 키를 다시 누르거나 마우스로 버튼 라벨의 오른쪽을 클릭해도 커서가 버튼 라벨의 오른쪽으로 이동하지 않습니다. 사실 qq space는 ie8

ie8

에도 이런 문제가 있습니다. 하지만 ie6, 7에서는 그런 문제가 없습니다.

ie7

ie6

여기서 ie8의 경우 keydown 이벤트 콜백 check_comment를 텍스트 상자에 바인딩해야 합니다. ie6 및 7에 대해 바인딩하면 문제가 없습니다. 여기서는 ie에 균일하게 바인딩됩니다.

function getPositionForTextArea(ctrl) { //获取光标位置
      var CaretPos = 0; 
      if(document.selection) {
        ctrl.focus(); 
        var Sel = document.selection.createRange(); 
        var Sel2 = Sel.duplicate(); 
        Sel2.moveToElementText(ctrl); 
        var CaretPos = -1; 
        while(Sel2.inRange(Sel)){ 
          Sel2.moveStart('character'); 
          CaretPos++; 
        } 
      }else if(ctrl.selectionStart || ctrl.selectionStart == '0'){
        CaretPos = ctrl.selectionStart; 
      } 
      return (CaretPos); 
    }
      vm.check_comment=function(e,i){
        var a=getPositionForTextArea($('reply'+i));
        if(e.keyCode==8&&a<3){
          var pat = new RegExp("^.*? $",&#39;i&#39;);
          if(pat.test(this.innerHTML))
            this.innerHTML=&#39;&#39;;
        }
      };

커서 위치 <3은 버튼 레이블이 커서 앞에 있고 입력 상자를 지울 수 있음을 나타냅니다. 엄격함을 위해 정규식은 버튼 레이블인지 확인하는 데 사용됩니다.

또한 IE가 Enter 키를 눌렀을 때 p 레이블이 정규식의 버튼 레이블 주위에 표시됩니다. 줄을 변경하면 기본적으로 이전 줄이 자동으로 변경됩니다. 물론 처음에는 p 태그가 입력 상자의 버튼 태그 외부에 래핑되어야 합니다.

여담

qq space는 ff에서 img 태그를 사용합니다

QQ 스페이스는 최신 브라우저에서 img 태그를 사용한다고 늘 생각했는데, 글을 쓰다가 크롬에서 img 태그를 사용하는 것을 발견하고, 크롬에 img 태그를 삽입해 보았는데 작동하지 않았습니다. 테두리는 제거할 수 없으며 삭제할 때 바인딩에서 커서 위치의 판단이 IE와 일치하지 않습니다. 최신 브라우저는 기본적으로 줄 바꿈에
를 삽입하기 때문에 Chrome에서는 버튼 태그를 사용합니다.

게다가 제 예에서는 버튼 라벨을 ff에 삽입하면 입력 상자에 쉽게 포커스가 들어오지 않습니다. 너무 게으른 나머지 ff에 img 태그를 삽입합니다. 해당 keydown 콜백

if(!!-[1,]&&e.keyCode==8&&$('reply'+i).childNodes.length==2){//ff
          this.innerHTML='';
          return;
        }

은 하위 노드 수만 결정하면 됩니다. 입력 상자입니다.

최종 효과

크롬

ff

ie8

ie7

ie6

위 내용은 이 글의 전체 내용입니다. , 모두가 좋아하길 바랍니다.

관련 기사:

PHP 댓글 답글 솔루션

PHP 댓글 답글에 Infinitus 중첩을 구현하는 방법에 대해 알려주세요. 기본 코드는 작성되었고, 전문가의 답변을 기대합니다

PHP 무선레벨을 활용한 카테고리 분류로 댓글답글 기능 구현