代码如下：

<!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>js获取编辑框游标的位置</title>

    <script src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js" type="text/javascript"></script>

    <script type="text/javascript">

        //去除左右所有空格

        String.prototype.trim = function () {

            return this.replace(/(^\s*)|(\s*$)/g, "");

        }

        function getPosition(element) {

            var OsObject = "";

            if (navigator.userAgent.indexOf("MSIE") > 0) {

                OsObject = "MSIE";

            }

            if (navigator.userAgent.indexOf("Firefox") > 0) {

                OsObject = "Firefox";

            }

            if (navigator.userAgent.indexOf("Safari") > 0) {

                OsObject = "Safari";

            }

            if (navigator.userAgent.indexOf("Camino") > 0) {

                OsObject = "Camino";

            }

            if (navigator.userAgent.indexOf("Gecko") > 0) {

                OsObject = "Gecko";

            }

            if (navigator.userAgent.indexOf("Chrome") > 0) {

                OsObject = "Chrome";

            } 

            var result = 0;

            if (!document.selection) { //非IE浏览器

                var thisTagName = null;

                if ($(element)[0].nodeName != "TEXTAREA" && $(element)[0].nodeName != "INPUT") {

                    if ($(element)[0].nodeName == "DIV" && $(element).attr("contenteditable") == "true") {

                        thisTagName = window.getSelection().anchorNode.parentElement.tagName;

                    }

                    else {

                        thisTagName == null;

                    }

                }

                else {

                    if ($(element)[0].nodeName == "INPUT" && $(element).attr("type") == "text") {

                        thisTagName = window.getSelection().anchorNode.tagName;

                    }

                    else {

                        console.log(window.getSelection());

                        thisTagName = window.getSelection().anchorNode.tagName;

                    }

                }

                if (thisTagName == "TEXTAREA" || thisTagName == "INPUT" || (thisTagName=="BODY"&&OsObject == "Chrome")) {

                    result = element.selectionStart;

                }

                else if (thisTagName != null) {

                    if (thisTagName == element.tagName) {

                        if (window.getSelection().anchorNode.textContent == $(element).text()) {

                            result = window.getSelection().anchorOffset;

                        }

                        else {

                            var currentIndex = window.getSelection().anchorOffset;

                            var txt = "";

                            var txtoo = window.getSelection().anchorNode.previousSibling;

                            while (txtoo != null) {

                                txt += txtoo.textContent;

                                txtoo = txtoo.previousSibling;

                            }

                            result = txt.length + currentIndex;

                        }

                    }

                    else {

                        var currentIndex = window.getSelection().anchorOffset;

                        var txt = "";

                        var txtoo = window.getSelection().anchorNode.parentElement.previousSibling;

                        while (txtoo != null) {

                            txt += txtoo.textContent;

                            txtoo = txtoo.previousSibling;

                        }

                        result = txt.length + currentIndex;

                    }

                }

                else {

                    return 0;

                }

            } else { //IE

                var rng;

                if ($(element).attr("tagName") == "TEXTAREA" || ($(element).attr("tagName") == "INPUT" && $(element).attr("type") == "text") || ($(element).attr("tagName") == "DIV" && $(element).attr("contenteditable") == "true")) {

                    element.focus();

                    rng = document.selection.createRange();

                    rng.moveStart('character', -element.innerText.length);

                    var text = rng.text;

                    for (var i = 0; i < element.innerText.length; i++) {

                        if (element.innerText.substring(0, i + 1) == text.substring(text.length - i - 1, text.length)) {

                            result = i + 1;

                        }

                    }

                }

                else {

                    return 0;

                }

            }

            return result;

        }

        function getValue(element) {

            var pos = getPosition(element);

            document.getElementById("pnum").value = pos;

        }

    </script>

    <style type="text/css">

        #Div1, #Div2

        {

            width: 500px;

            height: 100px;

            border: solid 1px black;

        }

    </style>

</head>

<body>

    <input id="pnum" type="text" value="Hello,wellcome to test! 你好,欢迎测试!" onmouseup="getValue(this)"style="display: block" />

    <textarea cols="60" rows="10" onkeyup="getValue(this)" onmouseup="getValue(this)">Hello,wellcome to test! 你好,欢迎测试! 注意源代码开闭合标记之间不能换行，否则统计错误！</textarea>

    <div id="Div1" onclick="getValue(this);" onkeyup="getValue(this);" contenteditable="true">一二三<span>四五</span>六七八<span>九零</span> 注意源代码开闭合标记之间不能换行，否则统计错误！注意div编辑框源码里面是嵌套有其他标签的，可以正常返回正确位置！</div>

    <div id="Div2" onclick="getValue(this);" onkeyup="getValue(this);">一二三四五六<span>七八</span></div>

</body>

</html>

js获取编辑框游标的位置的更多相关文章

  1. js获取单选框的值

    js获取单选框的值 var lx= $("input[name='lx']:checked").val();

  2. js点击获取—通过JS获取图片的相对坐标位置

    一.通过JS获取鼠标点击时图片的相对坐标位置 源代码如下所示: <!DOCTYPE html> <html lang="en"> <head> ...

  3. MFC如何获取编辑框中输入的内容

    1.GetDlgItemText() 2.先用 GetDlgItem(编辑框的ID)获取指向编辑框的指针.再用GetWindowText函数将获取内容保存至指定的字符数组里. 3.使用 GetDlgI ...

  4. MFC中窗口启动后，CEdit编辑框默认光标位置设置，顺序的调节方法

    MFC中窗口启动后,CEdit编辑框默认光标位设置,顺序的调节方法 在编辑界面按下ctrl+D键,就会出现所有控件的Tab键顺序,按照自己想要的顺序依次点击控件,就可以重新安排顺序.数值1就是默认停留 ...

  5. js获取输入框中当前光标位置并在此位置插入字符串的方法(angularjs+ts)

    一半是参照别人代码,一半是自己代码,略笨拙,如果有更好的方法希望分享. 获取当前光标位置的方法 getCaretPosition (obj:any) { //获取输入框中当前光标的位置,obj为此输入 ...

  6. js获取单选框里面的值

    rt,如果想获取单选框里面的值,该如何获取呢. <script> window.onload = function(){ //通过名字获取 getElementsByName //var ...

  7. js获取单选框radio的值

    遇到一个js获取radio值的问题,原来根据frm.type.value取到的值在ie下是空值 解决办法:type为每个radio的值 var chkObjs=document.getElements ...

  8. VC++ 学习笔记3 获取编辑框字符串

    边界框添加字符串比较简单 可以直接在对话框的空间上面点击右键添加变量,变量类型为CString  在此取名为m_NUM 直接使用m_NUM就是编辑框的CString, 举例: 在messagebox显 ...

  9. js 获取单选框和复选框的值和js dom方法给单选框和多选框赋值

    获取单选框框值的方法 function getRadioRes(Name){ var rdsObj = document.getElementsByName(Name); var checkVal = ...

随机推荐

  1. MYSQL C API 记录

    一.环境与条件 MySQL AB 提供了C API,能够提供低等级界面,负责完毕涉及SQLserver交互的大多数常规任务:数据库连接 .查询.结果集处理和错误处置.C API通过两个组件实现: 头文 ...

  2. Codeforces Round #243 (Div. 2) Problem B - Sereja and Mirroring 解读

    http://codeforces.com/contest/426/problem/B 对称标题的意思大概是.应当指出的,当线数为奇数时,答案是线路本身的数 #include<iostream& ...

  3. 记一次tomcat故障排查（转）

    1~1024之间的端口号是保留端口,通常是为特定目的预留的.虽然你的问题不是由于保留端口引起的,但是仍然建议你不要随意使用保留端口作为自定义服务的端口,如果你能早早遵循这一规则压根就不会遇到这个问题. ...

  4. 【BZOJ3627】【JLOI2014】路径规划 分层图

    意甲冠军:要查找.有门户网站:http://www.lydsy.com/JudgeOnline/problem.php? id=3627 注意:点的等待时长示意图为: 非常清晰了吧?没事,不清晰就不清 ...

  5. .NET应用架构设计—四色原型模式（色彩造型、域无关的模型）（概念版）

    阅读文件夹: 1.背景介绍 2.问自己,UML对你来说有意义吗?它帮助过你对系统进行分析.建模吗? 3.一直以来事实上我们被一个缝隙隔开了,使我们对OOAD遥不可及 4.四色原型模式填补这个历史缝隙, ...

  6. C++教程之lambda表达式一

    什么是Lambda? C++ 11增加了一个很重要的特性--Lambda表达式.营里(戴维营)的兄弟都对Objective-C很熟悉,很多人多block情有独钟,将各种回调函数.代理通通都用它来实现. ...

  7. 文件I/O之-打开文件在内核中的表示

    在unix系统中,一切皆文件.系统把文件夹.字符设备.块设备.套接字都当做文件来对待.对于文件的操作,使用I/O函数,这里所说的I/O函数是指系统调用.大多数文件的I/O要用到这5个函数:open.r ...

  8. JavaScript学习之获取URL参数

    最近看了几道面试题,其中有一道就是关于写一个方法来获取浏览器地址栏URL查询部分的字段内容.虽然之前看过相关的东西,但感觉有点模糊,所以就又全面的学习一遍,谨以此文记之! 准备知识 在JavaScri ...

  9. DevExpress Report 其他常用设计技巧

    原文:DevExpress Report 其他常用设计技巧 1 设置默认的打印纸张及页边距 选择Report-打开属性窗口,设置默认边距(Margins)和默认纸张(PaperKind). 2 修改R ...

  10. Android Activity和Fragment生命周期图