关于 input 和 textarea 文本框光标定位问题

2018年1月9日 1.98k 次阅读 0 条评论 1 人点赞

当文本框内有值的情况下,光标显示在文本框内容末尾。

兼容:IE, Firefox, Chrome

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<title>JavaScript 获取/设置光标位置,兼容Input&&TextArea。</title>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
<style>  
body {  
    margin: 32px;  
    font-family: Verdana, sans-serif;  
    font-size: 13px;  
}  
  
.title {  
    font-size: 18px;  
    font-weight: bolder;  
    margin: 40px 0;  
}  
  
.input {  
    width: 50%;  
    font-family: Verdana, sans-serif;  
    font-size: 13px;  
    text-indent: 2px;  
}  
</style>  
<script>  
    //获取光标位置   
    //单行文本框   
    function getPositionForInput(ctrl) {  
        var CaretPos = 0;  
        if (document.selection) { // IE Support   
            ctrl.focus();  
            var Sel = document.selection.createRange();  
            Sel.moveStart('character', -ctrl.value.length);  
            CaretPos = Sel.text.length;  
        } else if (ctrl.selectionStart || ctrl.selectionStart == '0') {// Firefox support   
            CaretPos = ctrl.selectionStart;  
        }  
        return (CaretPos);  
    }  
    //多行文本框   
    function getPositionForTextArea(ctrl) {  
        var CaretPos = 0;  
        if (document.selection) {// IE Support   
            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') {// Firefox support   
            CaretPos = ctrl.selectionStart;  
        }  
        return (CaretPos);  
    }  
    //设置光标位置函数   
    function setCursorPosition(ctrl, pos) {  
        if (ctrl.setSelectionRange) {  
            ctrl.focus();  
            ctrl.setSelectionRange(pos, pos);  
        } else if (ctrl.createTextRange) {  
            var range = ctrl.createTextRange();  
            range.collapse(true);  
            range.moveEnd('character', pos);  
            range.moveStart('character', pos);  
            range.select();  
        }  
    }  
    //test   
    function process(id, targetId) {  
        var no = document.getElementById(id).value;  
        setCursorPosition(document.getElementById(targetId), no);  
    }  
  
    function setautofocus(){  
        var textarea = document.getElementById("zhangdanNum");  
        var textarealength = getPositionForTextArea(textarea);  
        var num = textarea.value;  
        setCursorPosition(textarea,num.length);  
  
    }  
</script>  
</head>  
<body onload="setautofocus()">  
    <div class="title">JavaScript 获取/设置光标位置,兼容Input&&TextArea:</div>  
    <div class="title">单行文本框</div>  
    <p>  
        <input class="input" id="textbox" name="textbox"  
            value="Hi,www.jb51.net!!!" />  
    </p>  
  
    <input type="button"  
        onclick="alert( getPositionForInput( document.getElementById('textbox') ) )"  
        value="Get Position"> 输入位置:  
    <input type="text" id="no1" size="1" />  
    <input type="button" onclick="process('no1','textbox');"  
        value="Set Position">  
  
    <div class="title">多行文本框</div>  
    <textarea id="zhangdanNum" name="zhangdanNum"  
        style="height: 66px; width: 246px; overflow: hidden">aaaaa</textarea>  
    <input type="button"  
        onclick="alert( getPositionForTextArea( document.getElementById('zhangdanNum') ) )"  
        value="Get Position"> 输入位置:  
    <input type="text" id="no2" size="1" />  
    <input type="button" onclick="process('no2','zhangdanNum');"  
        value="Set Position">  
</body>  
</html>

 

此方法是是转载网上,因没能找到原出处,不能写明原始地址,望请谅解!

标签:
最后编辑:2018年6月29日

我就是我,是颜色不一样的烟火。

文章评论(0)