>웹 프론트엔드 >JS 튜토리얼 >JavaScript 사용자 정의 텍스트 상자 커서의 코드 세부정보

JavaScript 사용자 정의 텍스트 상자 커서의 코드 세부정보

黄舟
黄舟원래의
2017-03-23 14:42:261539검색

이 글에서는 좋은 참고값을 가지고 있는 텍스트 상자 커서를 사용자 정의하는 방법의 JavaScript 예제를 주로 소개합니다. 아래 에디터로 살펴보겠습니다.

텍스트 상자(입력 또는 텍스트 영역)의 커서는 스타일을 수정할 수 없습니다(색상을 통한 커서 색상 수정 제외). 하지만 저자는 개인이 자신만의 웹사이트를 만들 때 텍스트 상자의 커서가 자신만의 스타일을 가지기를 바랍니다. 따라서 텍스트 상자의 커서를 시뮬레이션하고 자신만의 스타일로 커서를 디자인해 보십시오. 다음은 글쓴이의 개인적인 생각입니다.

【************************기본 아이디어**************** **** *************】

키보드 조작의 경우 기본적인 커서 조작은 가장 기본적인 3개의 키에 지나지 않습니다. : 왼쪽 왼쪽 화살표, 오른쪽 화살표 및 백스페이스.

왼쪽 화살표: 커서를 왼쪽으로 이동, 문자 추가 또는 삭제

오른쪽 화살표: 오른쪽으로 커서 이동, 문자 추가 또는 삭제

백스페이스: 문자 삭제

【******** JS를 통해 커서의 기본 기능을 구현하는 방법을 이야기할 때 먼저 html과 css 몇 가지를 소개하겠습니다 ********]

***html***

<p class="cursor_module">
  <p class="cursor_content"></p><span class="cursor"></span>
</p>

참고: 위의 html 형식은 커서만 시뮬레이션합니다. 문자 입력여전히 양식 요소에 의존해야 합니다. 페이지에서 작성자는 실제 양식 요소를 숨기고 커서를 시뮬레이션하는 HTML만 표시합니다

<form id="chatting_form" class="clearfix" enctype="application/x-www-form-urlencoded">
    <label for="chatting_msg"></label><input type="text" id="chatting_msg" autofocus name="chatting_msg">
 </form>

첫 번째 줄: 커서 시뮬레이션 두 번째 줄: 양식의 커서 요소

***CSS***

으으으으

【********** ****** **************** JS 정식 도입 시작 *********************** *****】

**왼쪽 화살표**

1. 텍스트가 입력되지 않은 경우 왼쪽 화살표를 누릅니다. , 커서는 여전히 왼쪽 값 0 위치에 있습니다.

2. 텍스트를 입력한 후(예: 텍스트 상자의 값이 비어 있지 않음) 왼쪽 화살표를 누르면 커서가 왼쪽으로 이동합니다.

제약 : 왼쪽 값이 0인 위치로 이동 시 왼쪽 화살표를 계속 눌러도 커서가 왼쪽으로 계속 이동하지 않습니다. [커서는 왼쪽 값이 있어야만 이동할 수 있습니다. 0보다 커야 함]

.cursor_module{
  position: relative;
}
.cursor_content{
  position: absolute;
  top: 0;
  left: 0;
  width: auto;
  max-width: 90%;
  word-wrap: break-word;
  overflow: hidden;
  display: inline-block;
  white-space: pre;
}
.cursor{
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 16px;
  display: inline-block;
  background: green;
  z-index: 1000;
}

**오른쪽 화살표**

1. 텍스트 입력이 없으면 오른쪽 화살표를 누르세요. 커서는 여전히 왼쪽 값인 0 위치에 있습니다.

2. 텍스트를 입력한 후 오른쪽 화살표를 누르면 커서가 오른쪽으로 이동합니다.

제약 : 텍스트 내용의 마지막 문자 뒤로 이동할 때 오른쪽 화살표를 계속 눌러도 커서가 계속 오른쪽으로 이동하지 않습니다. [커서의 왼쪽 값이 p 요소의 너비, 커서는 마지막 문자 위치】

if(cCode===37 && chatting_msg.value!=&#39;&#39;){
   if(aSpan_l>0){
      aSpan.style.left=aSpan_l-aSpan_w+&#39;px&#39;;
   }
}

**백스페이스**

일 때. 문자가 없으면 삭제 키를 누르면 시뮬레이션 커서가 왼쪽으로 이동하지 않고 원래 위치에 유지됩니다.

2. 문자를 삭제하면 커서 위치가 왼쪽으로 한 단위 이동합니다(이 예에서는 , 6px);

else if(cCode===39 && chatting_msg.value!=&#39;&#39;){
  aSpan.style.left=aSpan_l+aSpan_w+&#39;px&#39;;
    if(aSpan_l===aP_width){
       aSpan.style.left=aP_width+&#39;px&#39;;
     }
}

**기타 키**

else if(cCode===8){
  if(chatting_msg.value!=&#39;&#39;){
     aP.innerHTML=chatting_msg.value;
     if(aSpan_l!=0){
       aSpan.style.left=aSpan_l-aSpan_w+&#39;px&#39;;
      }
   }else{
      aSpan.style.left=0;
    }
      //if enter backspace,remove move event
      JM.removeHandler(chatting_msg,&#39;input&#39;,move,false);
 }

질문: 작성자가 입력란의 값을 p 요소에 적용하려면 innerHTML 코드 [aP.innerHTML=chatting_msg.value;]가 keyup 이벤트 처리 프로그램에 배치되어 있나요?

이벤트가 keydown(또는 keypress)일 때 텍스트 상자의 값은 p 요소의 innerHTML에 할당됩니다. 실제 상황에서는 'ab' 문자 두 개가 입력됩니다. , 그러나 p 요소에는 첫 번째 문자 'a'만 표시됩니다.

간단히 말하면 keydown이나 keypress는 텍스트 상자 자체에 문자를 표시하는 데 문제가 없습니다. 즉, 입력한 만큼 문자가 표시되지만 텍스트 내용은 p 요소에 표시됩니다. "한 비트 더 느리게 반응"합니다.

[팁: 작성자는 문자가 아닌 다른 키에 대해 아무런 처리도 하지 않았습니다.]

[************* ******* ************덧셈****************************** 】

1. 백스페이스 키를 눌렀을 때 커서의 올바른 위치에 영향을 주지 않도록 백스페이스 키를 누를 때 "이동" 기능을 취소해야 합니다.

-------JM.removeHandler(chatting_msg,'input',move,false);

누름

2. .xxxx 코드에 존재하는 JM은 작성자의 코드 베이스입니다.

JM.addHandler(...): 이벤트 핸들러 추가

JM.removeHandler(...) : 이벤트 핸들러 제거

JM.getStyle(...): 컴퓨터 스타일 값 가져오기

    >>>>>>>>>>>具体的代码可以参考《Javascript高级程序设计》这本书

3、笔者自定义的这个光标现在只适合于输入英文、数字、标点符号,暂时不支持输入中文

《《《《《《《    完整代码    》》》》》》》》》

var Cursor=(function () {
  var chatting_msg=JM.getEles(&#39;[name=\&#39;chatting_msg\&#39;]&#39;)[0];
  var cursor_module=JM.getEles(&#39;.cursor_module&#39;)[0];
  var chatting_footer=JM.getEles(&#39;.chatting_footer&#39;)[0];
  //create elements
  var cP=document.createElement(&#39;p&#39;);
  var cSpan=document.createElement(&#39;span&#39;);
  JM.addClass(cP,&#39;cursor_content&#39;);
  JM.addClass(cSpan,&#39;cursor&#39;);
  JM.addNodes(cursor_module,cSpan);
  JM.addNodes(cursor_module,cP);
  //keydown
  JM.addHandler(chatting_msg,&#39;keydown&#39;,function (event) {
    var ev=JM.getEvent(event),
      cCode=JM.getCharCode(ev);
    var aP=JM.getEles(&#39;.cursor_content&#39;)[0],
      aSpan=JM.getEles(&#39;.cursor&#39;)[0];
    var aP_width=parseInt(JM.getStyle(aP,&#39;width&#39;));//get aP real width
    var aSpan_l=parseInt(JM.getStyle(aSpan,&#39;left&#39;)),//get span left
      aSpan_w=parseInt(JM.getStyle(aSpan,&#39;width&#39;));//get span width
    var val=chatting_msg.value;
    //left arrow
    //没有value值,按左箭头不动
    //有value值,按右箭头,光标向左移,但移到前面一个字符的后面就不可以再移动
    if(cCode===37 && chatting_msg.value!=&#39;&#39;){
      if(aSpan_l>0){
        aSpan.style.left=aSpan_l-aSpan_w+&#39;px&#39;; 
      }
    }
    //right arrow
    //没有value值,按右箭头不动
    //有value值,按右箭头,光标向右移,但移到最后一个字符的后面就不可以再移动
    else if(cCode===39 && chatting_msg.value!=&#39;&#39;){
      aSpan.style.left=aSpan_l+aSpan_w+&#39;px&#39;;
      if(aSpan_l===aP_width){
        aSpan.style.left=aP_width+&#39;px&#39;;
      }
    }
    //backspace
    else if(cCode===8){
      if(chatting_msg.value!=&#39;&#39;){
        aP.innerHTML=chatting_msg.value;
        if(aSpan_l!=0){
          aSpan.style.left=aSpan_l-aSpan_w+&#39;px&#39;;
        }
      }else{
        aSpan.style.left=0;
      }
      //if enter backspace,remove move event
      JM.removeHandler(chatting_msg,&#39;input&#39;,move,false);
    }
    else{
      //show value by keyup not keydown,because keydown will slow step;
      JM.addHandler(chatting_msg,&#39;keyup&#39;,function () {
        aP.innerHTML=chatting_msg.value;
      },false);
      JM.addHandler(chatting_msg,&#39;input&#39;,move,false);
    }
  },false);
  //move cursor in the text
  var move=function () {
    var aSpan=JM.getEles(&#39;.cursor&#39;)[0],
      aSpan_l=parseInt(JM.getStyle(aSpan,&#39;left&#39;)),
      aSpan_w=parseInt(JM.getStyle(aSpan,&#39;width&#39;));
    aSpan.style.left=aSpan_l+aSpan_w+&#39;px&#39;;
  };
})();

위 내용은 JavaScript 사용자 정의 텍스트 상자 커서의 코드 세부정보의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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