可编辑DIV设置光标位置
时间:2022-05-08
本文章向大家介绍可编辑DIV设置光标位置,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
平时我们使用文本框input, textarea时,我们有时候需要得到光标的位置或者说设置光标的位置.
但是文本框有个不足,就是不能满足我们插入图片或者其他的一些要求.
所以有时候我们使用div来代替文本框.
今天为了搞定设置DI的光标位置.头疼啊,终于可以了,记录一下,网上资料不多.
首先要让DIV启用编辑模式.
<div contenteditable=true id="divTest"></div>
通过设定contenteditable=true开启div的编辑模式.这样DIV就可以跟文本框一样输入内容了。
不扯话题了。下面说怎么获取或设置光标位置.
2个步骤
1:获取DIV中的光标位置
2:改变光标位置
var cursor = 0; // 光标位置
document.onselectionchange = function () {
var range = document.selection.createRange();
var srcele = range.parentElement();//获取到当前元素
var copy = document.body.createTextRange();
copy.moveToElementText(srcele);
for (cursor = 0; copy.compareEndPoints("StartToStart", range) < 0; cursor++) {
copy.moveStart("character", 1);//改变光标位置,实际上我们是在记录cursor的数量.
}
}
给document绑定光标变化事件。用来记录光标位置.
这样就可以拿到DIV的光标位置了.
function moveEnd(obj) {
lyTXT1.focus();
var r = document.selection.createRange();
//因为这里死从当前光标开始移动的(好像文本框的是从0算起.)所以我们需要拿到当前光标位置,然后就可以计算出要移动多少位了,这样就可以把光标移动到想要的位置了
r.moveStart('character', lyTXT1.innerText.length - cursor);
r.collapse(true);
r.select();
}
通过上面的我们就可以将DIV中的光标移动到最后面了..
- 了解ASP.NET MVC几种ActionResult的本质:EmptyResult & ContentResult
- 可视化(番外篇)——SWT总结
- 新年必看!预测2018年将是区块链爆发的行情
- 探秘Tomcat(一)——Myeclipse中导入Tomcat源码
- 解决Myeclipse下Debug出现Source not found以及sql server中导入数据报错
- Hadoop阅读笔记(七)——代理模式
- 认识ASP.NET MVC的5种AuthorizationFilter
- 2017十大“最差”密码出炉
- SVG图形绘制入门第一弹
- 使用自定义标记来构建页面
- ASP.NET MVC集成EntLib实现“自动化”异常处理[实例篇]
- ASP.NET Core管道深度剖析(2):创建一个“迷你版”的管道来模拟真实管道请求处理流程
- 机器学习实战之决策树
- 初学ReactJS,写了一个RadioButtonList组件
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 什么是SPU、SKU、SKC、ARPU
- C++判断类型的模板
- 强化学习/增强学习/再励学习介绍 | 深度学习 | 干货分享 | 解读技术
- Spring Security 初始化流程梳理
- 聊聊dubbo-go的kubernetesRegistry
- QMake复制文件/目录方法
- 计算FPS小例子
- 解读技术 |学习率及其如何改善深度学习算法
- MySQL 5.7 新特性:Generated Column
- 聊聊dubbo-go的nacosRegistry
- 聊聊dubbo-go的PrometheusReporter
- 聊聊dubbo-go的apolloConfiguration
- 聊聊dubbo-go的DefaultHealthChecker
- 一文搞懂matplotlib中的颜色设置
- pyecharts极简入门教程