텍스트 상자의 커서 위치를 가져오고 js를 통해 텍스트 상자를 찾으세요. 전체 코드가 첨부되어 있습니다.

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

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

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

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

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

백스페이스 키: 문자 삭제

【******** 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***

.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;
}

【**************************** JS 정식 소개 시작 ******** ****************************】

**왼쪽 화살표**

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

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

제약조건: 왼쪽으로 이동하면 값은 0, 왼쪽 화살표를 계속 눌러도 커서가 왼쪽으로 계속 이동하지 않습니다. [커서는 왼쪽 값이 0보다 커야 움직입니다.]

아아앙

**오른쪽 화살표**

1. 텍스트 입력이 없습니다. 오른쪽 화살표를 누르면 커서가 여전히 left 값이 0.

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

제한 사항: 텍스트 내용의 마지막 문자 뒤로 이동할 때 오른쪽을 계속 눌러도 커서가 계속 움직이지 않습니다. 화살표 오른쪽으로 이동 [커서의 왼쪽 값이 p 요소의 너비와 같을 때 커서는 마지막 문자 위치에 있음]

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

**백스페이스**

1. 문자가 없을 경우 삭제 키를 누릅니다. 커서를 시뮬레이션하고 왼쪽으로 이동하지 않고 원래 위치에 유지됩니다

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

6px);아아아아

**기타 키**

else{
       //show value by keyup not keydown,because keydown will slow step;
       JM.addHandler(chatting_msg,'keyup',function () {
                aP.innerHTML=chatting_msg.value;
       },false);
       JM.addHandler(chatting_msg,'input',move,false);
}
var move=function () {
    var aSpan=JM.getEles('.cursor')[0],
        aSpan_l=parseInt(JM.getStyle(aSpan,'left')),
        aSpan_w=parseInt(JM.getStyle(aSpan,'width'));
    aSpan.style.left=aSpan_l+aSpan_w+'px';
};

问题：为什么笔者会将输入框的value值赋值给p元素的innerHTML这行代码【aP.innerHTML=chatting_msg.value;】放置在 keyup 事件处理程序中？

在事件为keydown（或keypress）情况下，执行将文本框的value值赋值给p元素的innerHTML，实际情况下，如果输入两个字符 ‘ab’，但是在p元素内显示的就只有第一个字符 ‘a’。

简单来说就是，keydown或keypress对于文本框本身而言显示字符是没有问题，就是你输入多少个字符就显示多少个字符，但是对于要将文本内容显示在p元素内，则会 “反应慢一拍” 。

【提示：笔者对其他非字符键还未作任何处理】

【************************* 补充 ******************************】

1、为了在按下退格键时不影响光标的正确定位，需要在按下退格键时把 ”move“函数取消掉  

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

2、代码中存在的JM.xxxx，是笔者的代码库

　 JM.addHandler(...)：添加事件处理程序

　 JM.removeHandler(...)：删除事件处理程序

    JM.getStyle(...)：获取计算机样式的值

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

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

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

var Cursor=(function () {
    var chatting_msg=JM.getEles('[name=\'chatting_msg\']')[0];
    var cursor_module=JM.getEles('.cursor_module')[0];
    var chatting_footer=JM.getEles('.chatting_footer')[0];

    //create elements
    var cP=document.createElement('p');
    var cSpan=document.createElement('span');
    JM.addClass(cP,'cursor_content');
    JM.addClass(cSpan,'cursor');
    JM.addNodes(cursor_module,cSpan);
    JM.addNodes(cursor_module,cP);

    //keydown
    JM.addHandler(chatting_msg,'keydown',function (event) {
        var ev=JM.getEvent(event),
            cCode=JM.getCharCode(ev);

        var aP=JM.getEles('.cursor_content')[0],
            aSpan=JM.getEles('.cursor')[0];

        var aP_width=parseInt(JM.getStyle(aP,'width'));//get aP real width

        var aSpan_l=parseInt(JM.getStyle(aSpan,'left')),//get span left
            aSpan_w=parseInt(JM.getStyle(aSpan,'width'));//get span width

        var val=chatting_msg.value;
        //left arrow
        //没有value值，按左箭头不动
        //有value值，按右箭头，光标向左移，但移到前面一个字符的后面就不可以再移动
        if(cCode===37 && chatting_msg.value!=''){
            if(aSpan_l>0){
                aSpan.style.left=aSpan_l-aSpan_w+'px';  
            }
        }
        //right arrow
        //没有value值，按右箭头不动
        //有value值，按右箭头，光标向右移，但移到最后一个字符的后面就不可以再移动
        else if(cCode===39 && chatting_msg.value!=''){
            aSpan.style.left=aSpan_l+aSpan_w+'px';
            if(aSpan_l===aP_width){
                aSpan.style.left=aP_width+'px';
            }
        }
        //backspace
        else if(cCode===8){
            if(chatting_msg.value!=''){
                aP.innerHTML=chatting_msg.value;
                if(aSpan_l!=0){
                    aSpan.style.left=aSpan_l-aSpan_w+'px';
                }
            }else{
                aSpan.style.left=0;
            }
            //if enter backspace,remove move event
            JM.removeHandler(chatting_msg,'input',move,false);
        }
        else{
            //show value by keyup not keydown,because keydown will slow step;
            JM.addHandler(chatting_msg,'keyup',function () {
                aP.innerHTML=chatting_msg.value;
            },false);
            JM.addHandler(chatting_msg,'input',move,false);
        }
    },false);

    //move cursor in the text
    var move=function () {
        var aSpan=JM.getEles('.cursor')[0],
            aSpan_l=parseInt(JM.getStyle(aSpan,'left')),
            aSpan_w=parseInt(JM.getStyle(aSpan,'width'));
        aSpan.style.left=aSpan_l+aSpan_w+'px';
    };
})();

更多关于通过js获取文本框光标位置及定位到文本框的方法请关注php中文网！