代码如下：

<!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. android代码签名和混乱的包装

    研究了一下android的apk困惑签名和代码包装,假设没有混乱包.然后apk人们可以直接查看源代码反编译出来,尽管混乱包或能看懂.但不是那么容易理解,要求在至少一些时间 假设不混淆,反编译后的代码例 ...

  2. 端口扫描之王——nmap入门精讲（转）

    端口扫描在百度百科上的定义是: 端口扫描是指某些别有用心的人发送一组端口扫描消息,试图以此侵入某台计算机,并了解其提供的计算机网络服务类型(这些网络服务均与端口号相关),但是端口扫描不但可以为黑客所利 ...

  3. 用命令行在github新建一个项目

    Github Repository API中说明了可以通过发送一个请求来认证,之后就能通过命令行自动新建远程仓库了. 认证 curl -u 'username' https://api.github. ...

  4. 浅析Java中的final关键字（转）

    谈到final关键字,想必很多人都不陌生,在使用匿名内部类的时候可能会经常用到final关键字.另外,Java中的String类就是一个final类,那么今天我们就来了解final这个关键字的用法.下 ...

  5. List toArrays()

    import java.util.ArrayList; import java.util.Arrays; import java.util.List; public class ListToArray ...

  6. .net程序调用检测和性能分析工具——DotTrace

    DotTrace可以对.net程序进行性能监测,对正在运行的程序和网站监控,主要界面如下: 需要将该工具安装在程序运行的服务器上. 主要用到这个视图,显示了每个方法的时间,下面是反编译出来的代码. P ...

  7. Hdu 3962 Microgene (AC自己主动机+矩阵)

    标题效果: 构造一个字符串,使得有两个和两个以上的目标串.长短L这一系列有多少串都. IDEAS: 只有全款减有1一些字符串,没有目标就是答案. 假定数据是非常小的,够用dp解.dp[i][j][k] ...

  8. 【C++模版之旅】项目中一次活用C++模板(traits)的经历

    曾经曾在一个项目中碰到过一个挺简单的问题,但一时又不能用普通常规的方法去非常好的解决,最后通过C++模板的活用,通过traits相对照较巧妙的攻克了这个问题.本文主要想重现问题发生,若干解决方式的比較 ...

  9. LeetCodeOJ. Maximum Depth of Binary Tree

    见问题: https://oj.leetcode.com/problems/maximum-depth-of-binary-tree/ 主题概述 Given a binary tree, find i ...

  10. MySQL定义和变量赋值

    变量可以在子程序(性能.存储过程.匿名块)声明和使用.这些变量的范围是在BEGIN...END规划. 变量的定义 语法格式: DECLARE var_name [, var_name]... data ...