可编辑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中的光标移动到最后面了..
- 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 数组属性和方法
- Shiro学习笔记六(自定义Reaml-使用数据库设置 user roles permissions)
- Luncene学习 第一天 《入门程序》
- Luncene学习二《搜索索引》
- JavaWeb--简单分页技术
- 使用Python制作第一个爬虫程序
- 使用BeautifulSoup 爬取一个页面上的所有的超链接
- 使用PlaceHolder,测试碰见的问题
- 隐藏MySQL InnoDB Cluster / ReplicaSet实例
- MySQL8.0.21——错误日志中的组复制系统消息
- 【一】、搭建Hadoop环境----本地、伪分布式
- 在组复制中指定恢复IP地址
- START GROUP_REPLICATION可以将恢复凭据作为参数
- MySQL Shell转储和加载第1部分:演示!
- MySQL Shell转储和加载第2部分:基准测试
- MySQL Shell转储和加载第3部分:加载转储