div光标

最新推荐文章于 2023-05-14 15:26:13 发布
最新推荐文章于 2023-05-14 15:26:13 发布
阅读量80 收藏
点赞数
文章标签： xhtml java javascript ViewUI
原文链接：http://www.cnblogs.com/zhwl/p/4958673.html
版权

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

 

<!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="js/jquery-1.4.4.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).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! 你好,欢迎测试!"
οnmοuseup="getValue(this)" style="display: block" />
<textarea cols="60" rows="10" οnkeyup="getValue(this)"
οnmοuseup="getValue(this)">Hello,wellcome to test! 你好,欢迎测试! 注意源代码开闭合标记之间不能换行，否则统计错误！</textarea>
<div id="Div1" οnclick="getValue(this);" οnkeyup="getValue(this);"
contenteditable="true">
一二三<span>四五</span>六七八<span>九零</span>
注意源代码开闭合标记之间不能换行，否则统计错误！注意div编辑框源码里面是嵌套有其他标签的，可以正常返回正确位置！
</div>
<br />
<div id="Div2" οnclick="getValue(this);" οnkeyup="getValue(this);">
一二三四五六<span>七八</span>
</div>
</body>
</html>

转载于:https://www.cnblogs.com/zhwl/p/4958673.html

vue项目中在可编辑div光标位置插入内容的实现代码
10-15
以上就是在Vue项目中实现可编辑div光标位置插入内容的基本步骤。需要注意的是，由于浏览器之间的兼容性问题，可能需要对不同的浏览器进行适配。同时，为了提高用户体验，还可以考虑添加更多的交互细节，比如拖动元素...
在可编辑div中定位光标和设置光标
越陌度阡
03-03 9643
在HTML里面，光标是一个对象，光标对象是只有当你选中某个元素的时候才会出现的。 当我们去点击一个输入框的时候，就会产生一个选中对象 selection，就是我们可以看到的文字变成蓝色的那个区域，selection在火狐浏览器可以直接用 window.getSelection()获取，在HTML里面，selection只有一个的，并且selection是一个区域，你可以想象成一个长方形，它是有开.........
div可编辑，插入元素获取光标，getSelection()对象操作
m0_67108146的博客
05-14 2521
div可编辑，插入元素，获取光标位置，设置光标位置
可编辑div：处理光标插入加手写
qq_40184218的博客
07-28 315
html： // contenteditable： 可编辑属性，true or false // ref： 定位dom <div contenteditable="true" class="card-content" ref="cardAreaRef" placeholder="请输入或在右侧选择"></div> js： 选中右侧或底部 // link：想添加的标签，啥都行 // (this.$refs.cardAreaRef as any).focus()： 定位光标位置 ch.
可编辑div光标位置
01-25 4481
参考： https://developer.mozilla.org/en-US/docs/Web/API/Window/getSelection https://developer.mozilla.org/en-US/docs/Web/API/Selection/getRangeAt https://developer.mozilla.org/en-US/docs/Web/API/S
可编辑DIV光标定位
weixin_30522095的博客
10-20 574
可编辑DIV光标定位 为何需要光标定位 当一个DIV标签添加contenteditable=“true” 的属性值的时候，就会将该标签变成一个可编辑的输入框，如果仅是输入文字，完全可以满足需求，但是当我们要插入一张图片的时候（如表情），那么这时候我们将无法知道我们将表情图片插入到哪个位置中，这时候就需要记录DIV中的光标的位置，方便下次插入。 下面介绍的主要是微信网页中出现的问题：div可编辑框每...
Vue中div contenteditable 的光标定位方法
10-18
接下来将详细解释在Vue中如何控制div元素contenteditable的光标定位方法。 1. Vue中div[contenteditable=true]的使用场景： 在很多Web应用中，我们需要提供给用户一个可以输入文本的区域。通常情况下，我们会使用`...
DIV可编辑模式在光标位置插入内容
06-10
标题中的“DIV可编辑模式在光标位置插入内容”指的是在HTML中，使用`contenteditable`属性将一个`<div>`元素设置为可编辑区域，允许用户直接在该区域内输入或编辑文本。这个功能常用于富文本编辑器、在线文档编辑等...
js之向div contenteditable光标位置添加字符.html
08-07
主要是div通过contenteditable实现可编辑状态，可以实现按钮点击在光标处添加字符的功能
关键字提示编辑器一之可编辑div获取光标位置
weixin_43069875的博客
11-22 2024
没有考虑浏览器兼容性，暂时只考虑了Chrome。 效果 在div中输入的时候，底下的蓝色部分（span）跟随光标变化而变化，而且内容为光标前的所有文本。 红色的部分是一个|，用来模拟光标。所以只要获得|的相对像素位置，以及div的位置，就可以计算出光标的绝对像素位置。还有个前提是蓝色部分的样式要和div文字的样式相同。 div获取光标位置比较复杂，如果是textarea和input框，内部是纯文本，比较好处理。 div中输入的时候，第一行输入的内容是div的第一个文本元素。换行之后，每一行都会自动被一个d
点击div文字标签出现光标的问题
weixin_45615375的博客
05-16 3054
去掉光标 有时候我们在点击div和span或者p标签时，会出现光标，但是并不是输入框，所以光标是我们所不需要的 这个时候我们就不要给他去掉 解决方案和原因： 打开浏览器时，我们不小心按了F7，只需要按回来就行 ...
js 在div光标位置加入内容
齐枫的博客
11-16 2351
完整代码，可以自己测试 div指定位置插入内容 &amp;lt;html&amp;gt; &amp;lt;head&amp;gt;&amp;lt;/head&amp;gt; &amp;lt;body&amp;gt; &amp;lt;img id=&quot;pic&quot; src=&quot;http://pagead2.googlesyndication.com/pagead/imgad?id=CIC
可编辑DIV设置光标位置
杨春建的博客
08-16 2776
原文地址：http://www.cnblogs.com/cskk/archive/2013/03/30/divs.html 平时我们使用文本框input, textarea时，我们有时候需要得到光标的位置或者说设置光标的位置. 但是文本框有个不足，就是不能满足我们插入图片或者其他的一些要求. 所以有时候我们使用div来代替文本框. 今天为了搞定设置DIV的光标位置.头疼
html div 光标位置,可编辑div光标定位问题和在指定光标处插入html代码的解决
weixin_35678674的博客
06-04 494
很难找的解决办法贡献者(http://chwjbn.blog.163.com/blog/static/1038799201310762620681/)很棒//可编辑div光标问题functionset_focus(el){el=el[0];//jquery对象转dom对象el.focus();if($.browser.msie){varrange=document.selection...
关于可编辑div插入表情图标
li336699li的博客
11-12 1355
在最近的开发中因为项目需要一个可编辑插入表情的编辑框，起初也是头大煎熬，总是被我熬出来了。 在可编辑框中为难我们的是光标定位和在光标的位置插入指定的内容和表情 下面开始正事 节点内容是这样的我用的是vue作为前端 <div :contenteditable="true" ></div> 要在指定的位置插入内容...
vue 获取div光标位置
最新发布
07-14
要在Vue中获取`div`元素的光标位置，可以使用`Selection`对象和`Range`对象。下面是一个示例： 首先，在Vue组件的模板中，给`div`元素添加一个`ref`属性： ```html <div ref="myDiv" contenteditable="true" @...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值