html获取文本框光标位置,html 在编辑框中如何定位光标和获取光标最后位置
在HTML里面,光标是一个对象,光标对象是只有当你选中某个元素的时候才会出现的。
当我们去点击一个输入框的时候,实际上它会产生一个选中对象-selection(就是我们可以看到的文字变成蓝色的那个区域),selection在火狐浏览器可以直接用 window.getSelection()获取,在HTML里面,selection只有一个的,并且selection是一个区域,你可以想象成一个长方形,它是有开始和结束的
当你点击一个输入框,或者你切换到别的输入框,selection是会跟着变化的。光标就是在selection里面,光标叫做range,是一个片段区域,和selection一样,有开始点,和结束点,当我们对文字按下左键向右拉的时候,就看到了文字变成蓝色,那个就是光标的开始和结束,当我们直接点一下的时候,光标在闪,其实只是开始和结束点重叠了。
核心方法:getSelection() 返回一个Selection对象,用于表示用户选择的文本范围或插入符的当前位置
用法:selection = window .getSelection();
代码示例:html>
发送表情
var sendEmoji = document.getElementById('sendEmoji') // 定义最后光标对象
var lastEditRange; // 编辑框点击事件
document.getElementById('edit').onclick = function() { // 获取选定对象
var selection = getSelection() // 设置最后光标对象
lastEditRange = selection.getRangeAt(0)
} // 编辑框按键弹起事件
document.getElementById('edit').onkeyup = function() { // 获取选定对象
var selection = getSelection() // 设置最后光标对象
lastEditRange = selection.getRangeAt(0)
} // 表情点击事件
document.getElementById('sendEmoji').onclick = function() { // 获取编辑框对象
var edit = document.getElementById('edit') // 获取输入框对象
var emojiInput = document.getElementById('emojiInput') // 编辑框设置焦点
edit.focus() // 获取选定对象
var selection = getSelection() // 判断是否有最后光标对象存在
if (lastEditRange) { // 存在最后光标对象,选定对象清除所有光标并添加最后光标还原之前的状态
selection.removeAllRanges()
selection.addRange(lastEditRange)
} // 判断选定对象范围是编辑框还是文本节点
if (selection.anchorNode.nodeName != '#text') { // 如果是编辑框范围。则创建表情文本节点进行插入
var emojiText = document.createTextNode(emojiInput.value)
if (edit.childNodes.length > 0) { // 如果文本框的子元素大于0,则表示有其他元素,则按照位置插入表情节点
for (var i = 0; i
edit.insertBefore(emojiText, edit.childNodes[i])
}
}
} else { // 否则直接插入一个表情元素
edit.appendChild(emojiText)
} // 创建新的光标对象
var range = document.createRange() // 光标对象的范围界定为新建的表情节点
range.selectNodeContents(emojiText) // 光标位置定位在表情节点的最大长度
range.setStart(emojiText, emojiText.length) // 使光标开始和光标结束重叠
range.collapse(true) // 清除选定对象的所有光标对象
selection.removeAllRanges() // 插入新的光标对象
selection.addRange(range)
} else { // 如果是文本节点则先获取光标对象
var range = selection.getRangeAt(0) // 获取光标对象的范围界定对象,一般就是textNode对象
var textNode = range.startContainer; // 获取光标位置
var rangeStartOffset = range.startOffset; // 文本节点在光标位置处插入新的表情内容
textNode.insertData(rangeStartOffset, emojiInput.value) // 光标移动到到原来的位置加上新内容的长度
range.setStart(textNode, rangeStartOffset + emojiInput.value.length) // 光标开始和光标结束重叠
range.collapse(true) // 清除选定对象的所有光标对象
selection.removeAllRanges() // 插入新的光标对象
selection.addRange(range)
} // 无论如何都要记录最后光标对象
lastEditRange = selection.getRangeAt(0)
}
原文:
https://segmentfault.com/a/1190000005869372#comment-area
参考:
https://stackoverflow.com/questions/2388164/set-focus-on-div-contenteditable-element
html获取文本框光标位置,html 在编辑框中如何定位光标和获取光标最后位置相关推荐
- 运用百度地图API离线版(在线版)实现网管系统中终端定位和终端信息获取的功能...
一.了解百度地图API 1.百度地图JavaScript API简介 百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口,可在网站中构建功能丰富.交互性强的地图应用 ...
- 鸿蒙应用开发 | 文本框(Text)和编辑框(TextField)的功能与用法
大家好,我是你们的朋友 朋哥,今天开始朋哥开始研究鸿蒙了,定时会写一些文章分享给大家,希望多多提意见. 上一篇原创文章 解读了 鸿蒙开发布局的 自定义布局,也是为了总结一下几种布局的使用,里面牵涉到几 ...
- html获取文本框的值,如何获取输入框的内容
js如何获取input输入框中输入的值 直接使用.value属性即可获取输入框的内容. 详细的步骤如下: 首先获取输入框对应的DOM元素,如: var bt=document.getElementBy ...
- python 下拉列表单选框怎么获取元素_JS获取文本框,下拉框,单选框的值的简单实例...
1.文本框 1.1 通过var t=document.getElementById("test").value把值赋给变量t, 1.2 当然也可以反过来把已知的变量值赋给文本框,例 ...
- android获取当前位置经纬度,Android中通过GPS或NetWork获取当前位置的经纬度
今天在Android项目中要实现一个通过GPS或NetWork来获取当前移动终端设备的经纬度功能.要实现该功能要用到Android Framework 中的 LocationManager 类.下面我 ...
- JQuery、JavaScript获取文本值
JQuery.JavaScript获取文本值 首先准备一段HTML页面中的input标签: <input type="text" id="ID_NAME" ...
- VB.net实现从ListView控件中异地获取文本内容源代码
对于一些VB6工程代码来说,需要完成从VB到VB.net的转换,在转换过程中需要注意很多内容,利用VB.net的直接转换功能很少能完全成功,需要我们付出很大的努力. 下面的VB.net代码实现从其他应 ...
- python nlp_【NLP】Python NLTK获取文本语料和词汇资源
作者:白宁超 2016年11月7日13:15:24 摘要:NLTK是由宾夕法尼亚大学计算机和信息科学使用python语言实现的一种自然语言工具包,其收集的大量公开数据集.模型上提供了全面.易用的接口, ...
- 【selection】 学习光标API并实现编辑区插入表情图片的功能
目录 场景介绍 selection介绍 selection API range 介绍 range API 实现编辑区插入表情图片 参考资料 场景介绍 在写web版聊天器时,遇到一个需求: 聊天时用户可 ...
最新文章
- 关于flume配置加载(二)
- 使用nLite集成驱动教程
- 鱼和熊掌可以兼得,云原生开启“数据库大数据一体化”新时代
- 第九章 线程与内核对象的同步(6)
- Mysql翻转字符串reverse
- 【转载】进程间的通信之剪贴板方法实现源码
- 怎么下载php源文件,设计了一个php下载当前文件,却把php源文件下载下来了,为何?...
- UVA216 ——dfs
- Oracle使用IN 不能超过1000问题
- MongoDB和Elasticsearch的各使用场景对比
- 【Pytorch】nvidia-dali——一种加速数据增强的方法
- error: #error This file requires compiler and library support for the ISO C++ 2011 standard.
- 数据结构上机实践第14周项目1(2) - 验证算法(分块查找)
- C++进阶教程之命名空间
- 异动处理中的发票类型应用(Complaint Processing)
- Java 每半年就会更新一次新特性,再不掌握就要落伍了:Java14 的新特性
- 模式识别与智能系统和计算机视觉,模式识别与智能系统(论文).docx
- outlook2007 有一个程序正试图以您的名义自动发送电子邮件
- MavenLombok
- PyQt5——pyqtgraph绘图大招