获取div编辑框，textarea，input text的光标位置 兼容IE，FF和Chrome的方法介绍
网上苦找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.trim().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.trim().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>
相关推荐
-
用javascript获取textarea中的光标位置
对于写javascript写网页编辑器的人来说,获取textarea中的光标位置是一个非常重要的问题,而往往很多人在这个地方不知所措,找不到好的办法.昨天我在网上找到了一段javascript代码,本来不想把原版放在这里的,就是因为太精彩了,怕我给改坏了,所以还是原版放在这里吧. var start=0; var end=0; function add(){ var textBox = document.getElementById("ta"
-
JS在TextArea光标位置插入文字并实现移动光标到文字末尾
=IE支持document.selection =Firefox,Chrome,Safari以及Opera都有selectionStart和selectionEnd属性 复制代码 代码如下: function insertText(obj,str) { if (document.selection) { var sel = document.selection.createRange(); sel.text = str; } else if (typeof obj.selectionStart
-
JavaScript 获取/设置光标位置,兼容Input&&TextArea
JavaScript 获取/设置光标位置,兼容Input&&TextArea. body { margin: 32px; font-family: Verdana, sans-serif; font-size: 13px; } .title { font-size: 18px; font-weight: bolder;margin:40px 0; } .input { width: 50%; font-family: Verdana, sans-serif; font-size: 13px
-
获取div编辑框，textarea，input text的光标位置 兼容IE，FF和Chrome的方法介绍
网上苦找2小时,全是不能兼容FF的,看来这种东西网上是搞不到现成的了,只能自己动手丰衣足食 现在发布出来,今后网上就有现成的供人使用了. 为了省事,少量位置用了jquery 改原生JS也很方便,谁需要就请自己修改了. 欢迎各位路过高人拍板,欢迎各位留言提供改进代码. 又改进 兼容了Chrome 下面的代码已修改成最新版 上源码了 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q
-
易语言设置编辑框是否使用多行显示的方法
是否允许多行属性 所属对象:编辑框 操作系统支持:Windows 数据类型:逻辑型:本属性设置本组件是否允许输入多行文本. 例程 说明 本属性用于设置和获取指定编辑框是否使用多行显示. 运行结果: 总结 以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对我们的支持.如果你想了解更多相关内容请查看下面相关链接
-
Qt实现编辑框失去焦点隐藏功能
目录 1.控件 2.响应消息 3.窗口功能实现 3.1双击响应QLabel控件 3.2QLineEdit失去焦点 3.3QPushButton保存按钮 今天来为大家分享一个小功能,首先看实现的效果吧~ 功能讲解: QLineEdit控件进行文本编辑,点击保存按钮后,隐藏编辑框和保存按钮,仅展示编辑内容,当鼠标点击空白处时,同样隐藏编辑框.隐藏保存按钮,但不存储编辑文本 如果你要需要实现这样的功能,就继续往下看吧~ 1.控件 三个控件:QLineEdit编辑框.QPushButton按钮.QLab
-
EasyUI，点击开启编辑框，并且编辑框获得焦点的方法
复制代码 代码如下: onClickRow : function(rowIndex, rowData){ var editor = $('#datagrid').datagrid('getEditor', {index:rowIndex,field:"buyNum"}); editor.target.focus(); } 点击一行,开启编辑框的同时,将光标放在编辑框中. rowIndex:是开启编辑框这行当前页的行索引,从0开始: buyNum:是开启编辑框的字段
-
Javascript实现获取及设置光标位置的方法
本文实例讲述了Javascript实现获取及设置光标位置的方法.分享给大家供大家参考.具体如下: 在项目开发中经常遇到input等设置光标位置到最后的问题,今天我查了一下Google,找到了在IE.Firefox.Opera等主流浏览器的获取光标位置(getCursortPosition)以及设置光标位置(setCursorPosition)的函数. 1. 获取光标位置函数: function getCursortPosition (ctrl) { var CaretPos = 0; // IE
-
easy ui datagrid 从编辑框中获取值的方法
如下所示: var editors = $('datagrid的id').datagrid('getEditors', rowIndex); //rowIndex 行编号,从0算起 console.info(editors[0].target.val()); 以上这篇easy ui datagrid 从编辑框中获取值的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.
-
在chrome浏览器中，防止input[text]和textarea在聚焦时出现黄色边框的解决方法
特别是input[text]和textarea,并且在textarea右下角还有一个可用鼠标拖动该表textarea大小的功能,如下图所示: input[text]: textarea: 有的时候黄色边框很影响页面效果,并且textarea拖动改变大小之后直接影响布局,所以为了不使这些多余的功能和效果影响页面,可以使用一下几句CSS清除掉chrome浏览器的默认效果,代码如下: 取消表单项聚焦时产生的黄色边框: 复制代码 代码如下: input,button,select,textarea{ou
-
jQuery获取复选框被选中数量及判断选择值的方法详解
本文实例讲述了jQuery获取复选框被选中数量及判断选择值的方法.分享给大家供大家参考,具体如下: 获取复选框被选中值 <input type="button" id="btn5" value="获得选中的所有值"> <input type="text" name="dd" id="dd" size="50" /> $("#btn5&
-
layui从数据库中获取复选框的值并默认选中方法
如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="../../../static/js/css/layui.css" rel=