代码如下：

<!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. SQL入门学习5-函数、为此、CASE表达式

    6-1. 各种各样的函数 函数的种类 算数函数 字符串函数 日期函数 转换函数 聚合函数 1.1算术函数 数据类型:NUMERIC 是大多数DBMS都支持的一种数据类型. 通过NUMBERIC(全体位 ...

  2. 编译的依赖不能vs的release工程

    前言: 今天,我们正在做一个ocx插件的时候,放到刚装好win7系统的虚拟机上面注冊,弹出以下的一个错误提示: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQ ...

  3. Html.Partial和Html. RenderPartial

    圣殿骑士-蓝剑行动 Html.Partial和Html. RenderPartial用法 Html.Partial和Html. RenderPartial用法 Html.partial和RenderP ...

  4. Android Push Notifications using Google Cloud Messaging (GCM), PHP and MySQL

    http://www.androidhive.info/2012/10/android-push-notifications-using-google-cloud-messaging-gcm-php- ...

  5. 【甘道夫】官方网站MapReduce代码注释具体实例

    引言 1.本文不描写叙述MapReduce入门知识,这类知识网上非常多.请自行查阅 2.本文的实例代码来自官网 http://hadoop.apache.org/docs/current/hadoop ...

  6. Redis集群环境安装指南

    环境 RHLinux-6.4-64-EN, 红帽6.4 64位,英文正式公布版. Redis3.0.0 redis2.x版本号还不支持集群,3.0版本号将会支持,如今3.0版本号还在开发中,如今是be ...

  7. Mule ESB-Content-Based Routing Tutorial（2）

    承接 Mule ESB-Content-Based Routing Tutorial(1) 五.执行应用程序  完毕创建,配置.并保存你的新的应用程序,您就能够在嵌入Mule的server上执行(包含 ...

  8. nodejs安装：nodejs入门

    nodejs开篇 前几天看到好多关于node 的帖子没有单独说明node安装的文章~ 特发此篇 总结一下平时在windows上nodejs的安装... 1.js来搞前后端分离是nodejs的一大特点, ...

  9. jquery选择器基础知识

    $("#myELement")    选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 $("di ...

  10. Android中适用于ListView、GridView等组件的通用Adapter

    今天随便逛逛CSDN,看到主页上推荐了一篇文章Android 高速开发系列 打造万能的ListView GridView 适配器,刚好这两天写项目自己也封装了相似的CommonAdapter,曾经也在 ...