zoukankan      html  css  js  c++  java
  • ahjesus 获取div编辑框,textarea,input text的光标位置 兼容IE,FF和Chrome

    ahjesus 返回光标位置兼容IE,FF和Chrome,

    说明更新(2013-04-24){

    今天收到反馈说这个例子没作用了,经过查证测试发现是因为使用的jquery的版本过高引起的

    $(element).attr("tagName") 这个是非官方的用法 所以版本变化会有影响 如果要使用更高版本jquery,获取tagName改成原生就可以了

    或者调整其他获取tagName的方式

    }

    网上苦找2小时,全是不能兼容FF的,看来这种东西网上是搞不到现成的了,只能自己动手丰衣足食

    现在发布出来,今后网上就有现成的供人使用了。

    为了省事,少量位置用了jquery 改原生JS也很方便,谁需要就请自己修改了。

    欢迎各位路过高人拍板,欢迎各位留言提供改进代码。

    又改进 兼容了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>js获取div编辑框,textarea,input text的光标位置,兼容FF和IE</title>
        <script src="jquery-1.4.4.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).attr("tagName") != "TEXTAREA" && $(element).attr("tagName") != "INPUT") {
                        if ($(element).attr("tagName") == "DIV" && $(element).attr("contenteditable") == "true") {
                            thisTagName = window.getSelection().anchorNode.parentElement.tagName;                        
                        } //出自http://www.cnblogs.com/ahjesus 尊重作者辛苦劳动成果,转载请注明出处,谢谢!
                        else {
                            thisTagName == null;
                        }
                    }
                    else {                    
                        if ($(element).attr("tagName") == "INPUT" && $(element).attr("type") == "text") {
                            thisTagName = window.getSelection().anchorNode.tagName;
                        }
                        else {
                            console.log(window.getSelection());                     
                            thisTagName = window.getSelection().anchorNode.tagName;
                        }
                    }
                    console.log(thisTagName);
                    if (thisTagName == "TEXTAREA" || thisTagName == "INPUT" || (thisTagName=="BODY"&&OsObject == "Chrome")) {
                        result = element.selectionStart
                    } //出自http://www.cnblogs.com/ahjesus 尊重作者辛苦劳动成果,转载请注明出处,谢谢!                
                    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;
                                } //出自http://www.cnblogs.com/ahjesus 尊重作者辛苦劳动成果,转载请注明出处,谢谢!
                                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;
                        }
                    } //出自http://www.cnblogs.com/ahjesus 尊重作者辛苦劳动成果,转载请注明出处,谢谢!
                    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;
                            }
                        }
                    } //出自http://www.cnblogs.com/ahjesus 尊重作者辛苦劳动成果,转载请注明出处,谢谢!
                    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>
        <br />
        <div id="Div2" onclick="getValue(this);" onkeyup="getValue(this);">一二三四五六<span>七八</span></div>
    </body>
    </html>
  • 相关阅读:
    Vue项目中全局过滤器的使用(格式化时间)
    vue-photo-preview 图片放大功能
    mongoimport导入json文件
    node后台,MongoDB作为数据库,vue前端获取数据并渲染
    JeasyUI,导出Excel
    EasyUI的textbox的disable ,readonly 用法
    EasyUI 中 Combobox里的onChange和onSelect事件的区别
    NullReferenceException 的可恨之处
    最新国家行政区划代码,来自国家统计局2018年底最新数据
    把旧系统迁移到.Net Core 2.0 日记 (20) --使用MiniProfiler for .NET
  • 原文地址:https://www.cnblogs.com/ggzjj/p/3614698.html
Copyright © 2011-2022 走看看