怎么取Textarea中插入符光标(caret)的当前置?

ynduanlian 2015-05-04 03:16:19
页面上有一个Textarea
<textarea id="txt1" style="width:960px;" rows="20" cols="10"></textarea>

javascript怎么能取得当前输入光标(caret,不是鼠标光标)的位置:
1 如输入光标现在第几行第几列?
2 或者输入光标当前在屏幕上的坐标X Y是多少?
...全文
255 4 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
4 条回复
切换为时间正序
请发表友善的回复…
发表回复
  • 打赏
  • 举报
回复
<textarea id="txt1" style="width:960px;" rows="20" cols="10" onkeyup="this.setAttribute('st',getCaret(this))" onclick="this.setAttribute('st',getCaret(this))"></textarea>
<br /><input type="button" onclick="getInputPos()" value="获取输入位置"/>
<script>
    function getInputPos() {
        var t = document.getElementById('txt1'), st = t.getAttribute('st'), v = t.value;
        var row = -1, col = -1;
        if (st != null) {
            st = parseInt(st, '');
            v = v.substring(0, st);
            if (v == '') { row = 1; col = 0 }
            else {
                row = v.match(/\n/g);
                row = row ? row.length + 1 : 1;
                var arr = v.split('\n');
                col = arr[arr.length - 1].length;
            }
        }
        alert('行:' + row + '\n列:' + col);
    }
    function getCaret(node) {
        if (node.selectionStart) {
            return node.selectionStart;
        } else if (!document.selection) {
            return 0;
        }

        var c = "\001",
      sel = document.selection.createRange(),
      dul = sel.duplicate(),
      len = 0;

        dul.moveToElementText(node);
        sel.text = c;
        len = dul.text.indexOf(c);
        sel.moveStart('character', -1);
        sel.text = "";
        return len;
    }
</script>
天际的海浪 2015-05-04
  • 打赏
  • 举报
回复
引用 2 楼 ynduanlian 的回复:
您好,上面的代码,返回的是光标的逻辑位置(第几个字符),我需要的是它的几何位置(X Y坐标,或第几行第几列)。
文本框设置个等宽的字体和word-break:break-all;,这样每行的字符数就固定了 之后用光标的位置(第几个字符)不就能算出是第几行第几列了
ynduanlian 2015-05-04
  • 打赏
  • 举报
回复
您好,上面的代码,返回的是光标的逻辑位置(第几个字符),我需要的是它的几何位置(X Y坐标,或第几行第几列)。
  • 打赏
  • 举报
回复
http://stackoverflow.com/questions/263743/caret-position-in-textarea-in-characters-from-the-start

87,997

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧