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 { //IEvar 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>

转载于:https://www.cnblogs.com/ahjesus/archive/2012/11/08/2760402.html

ahjesus 获取div编辑框，textarea，input text的光标位置兼容IE，FF和Chrome相关推荐

获取滚动文本框TextArea焦点位置信息
//输入参数: // _mOffset 滚动文本框对象 //返回值: // OffsetObject 位置信息对象 // length 焦点位置长度 // leftValue 滚动文本框 ...
[图解]在输入框和文本框中获取和设置光标位置，以及选中文本和获取选中文本值的方法 --- 详解，兼容所有浏览器。...
为什么80%的码农都做不了架构师?>>> 写在前面最近在segmentfault上看到它的日期输入控件,感觉挺有意思.好吧,动手写一个,加到自己的代码库里吧. 然后问题来了, ...
安卓学习笔记17：常用控件 - 编辑框
文章目录零.学习目标一.继承关系图二.编辑框常用属性三.教学案例 - 用户注册 (一)运行效果 (二)涉及知识点 (三)实现步骤 1.创建安卓应用[UserRegistration] 2.将M ...
Vue中实现div编辑效果，及contenteditable设置为plaintext-only与true的区别
有时候我们希望实现点击一段div内文本时就能直接进行编辑,当然使用文本框.富文本等也可以实现,但终究有些麻烦. 目录效果预览参数介绍封装与使用使用效果差异 plaintext-only 的效果 ...
MFC的基本控件的使用~编辑框（Edit Controll）的使用
简单介绍一下编辑框的比较常用的属性: multiline :多行显示 WantReturn:使用回车 Auto HScroll:水平无限延伸 Auto VScroll:垂直无限延伸 Vertica ...
contentEditable,window.getSelection详解---可编辑div，容器，设置/获取光标位置，光标处插入内容及光标的操作
这周碰到一个东西,contentEditable ,它是用来指定一个元素是否是可编辑的,这也是富文本编辑器实现的底层支持,网上关于这部分东西的资料比较少或者不全,所以我来整理下关于这个属性,和可编辑区 ...
如何获取select中的value、text、index相关值如何获取单选框中radio值触发事件 radio 默认选中...
如何获取select中的value.text.index相关值 select还是比较常用的一个标签,如何获取其中的内容呢? 如下所示: <select id="select" ...
如何通过js获取html文本框中的值,js与jquery获取input输入框中的值实例讲解
如何用javascript获取input输入框中的值,js/jq通过name.id.class获取input输入框中的value 先准备一段 HTML 一.jquery获取input文本框中的值通过 ...
js同步获取文本框textarea输入的内容
教大家怎么实现同步获取文本框textarea输入的内容这个js功能感觉有点像ajax技术那么先写HTML标签代码 <textarea name="" cols=&qu ...

ahjesus 获取div编辑框，textarea，input text的光标位置兼容IE，FF和Chrome

ahjesus 获取div编辑框，textarea，input text的光标位置兼容IE，FF和Chrome相关推荐

最新文章

热门文章

ahjesus 获取div编辑框，textarea，input text的光标位置 兼容IE，FF和Chrome

ahjesus 获取div编辑框，textarea，input text的光标位置 兼容IE，FF和Chrome相关推荐

最新文章

热门文章

ahjesus 获取div编辑框，textarea，input text的光标位置兼容IE，FF和Chrome

ahjesus 获取div编辑框，textarea，input text的光标位置兼容IE，FF和Chrome相关推荐