js之向div contenteditable光标位置添加字符

 原理：

在HTML里面，光标是一个对象，光标对象是只有当你选中某个元素的时候才会出现的。

当我们去点击一个输入框的时候，实际上它会产生一个选中对象-selection（就是我们可以看到的文字变成蓝色的那个区域），selection在火狐浏览器可以直接用 window.getSelection()获取，在HTML里面，selection只有一个的，并且selection是一个区域，你可以想象成一个长方形，它是有开始和结束的

当你点击一个输入框，或者你切换到别的输入框，selection是会跟着变化的。光标就是在selection里面，光标叫做range，是一个片段区域，和selection一样，有开始点，和结束点，当我们对文字按下左键向右拉的时候，就看到了文字变成蓝色，那个就是光标的开始和结束，当我们直接点一下的时候，光标在闪，其实只是开始和结束点重叠了。

代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>#edit{height:500px;width:500px;border:1px solid red;}</style>

</head>

<body>

<div id="edit" contenteditable></div>

<input type="text" id="emojiInput">

<button id="sendEmoji">添加字符串</button>

<script>

    var edit = document.getElementById('edit')

    var emojiInput = document.getElementById('emojiInput')

    var sendEmoji = document.getElementById('sendEmoji')

    // 定义最后光标对象

    var lastEditRange;

    // 编辑框点击事件

    edit.onclick = function() {

        // 获取选定对象

        var selection = getSelection()

        // 设置最后光标对象

        lastEditRange = selection.getRangeAt(0)

    }

    // 编辑框按键弹起事件

    edit.onkeyup = function() {

        // 获取选定对象

        var selection = getSelection()

        // 设置最后光标对象

        lastEditRange = selection.getRangeAt(0)

    }

    // 表情点击事件

    sendEmoji.onclick = function() {

        // 编辑框设置焦点

        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.childNodes.length; i++) {

                    if (i == selection.anchorOffset) {

                        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)

    }

</script>

</body>

</html>

vue使用：

1.将lastEditRange（最后光标对象）定义为公共变量

2.在div输入框绑定click和keyup时间，然后在添加的点击事件运行函数

转载自：https://segmentfault.com/a/1190000005869372

js之向div contenteditable光标位置添加字符的更多相关文章

  1. 2017-02-20 可编辑div中如何在光标位置添加内容

    之前做了一个可编辑div需要在里面插入内容,搜了好多代码,就这个能实现我的功能,记录一下,以备以后用 <!DOCTYPE HTML> <html> <head> & ...

  2. js获取输入框中当前光标位置并在此位置插入字符串的方法(angularjs+ts)

    一半是参照别人代码,一半是自己代码,略笨拙,如果有更好的方法希望分享. 获取当前光标位置的方法 getCaretPosition (obj:any) { //获取输入框中当前光标的位置,obj为此输入 ...

  3. js获取可编辑区域光标位置

    请到简书中看,地址: http://www.jianshu.com/p/19a507cd5fd7 github测试例子 https://github.com/Stevenzwzhai/plugs/tr ...

  4. textarea 根据光标位置添加内容

    // 获取焦点 let txt = document.getElementById("countRule"); let temp = txt.value; txt.focus(); ...

  5. js 截取字符串，取指定位置的字符（完善中）

    1.获取字符串的最后一位或第一位 str.charAt(str.length - 1);    str.charAt(0);

  6. div contenteditable 代替Textarea，做成Vue属性动态绑定

    前言 一般都是用Textarea 文本来编辑,但发现可以用 div contenteditable = “true”,这个属性来搞定 <div contenteditable=true plac ...

  7. textarea在光标位置插入文字

    最近开发类似计算器界面,需要在textarea中编辑公式,涉及到 在光标位置插入 字符. 效果如下: + - * / 添加文字 // html代码如下: <!doctype html> & ...

  8. js控制使div自动适应居中

    一直都在想怎么样使弹出的DIV能在任何时候都是居中显示的,刚开始的时候是用CSS样式直接定义好层的位置,但是当页面很长的时候,或是浏览器窗口大小不是固定的时候就不能正确的显示,所以只好用JS来控制DI ...

  9. Python 字符串指定位置替换字符

    指定位置替换字符 def replace_char(old_string, char, index): ''' 字符串按索引位置替换字符 ''' old_string = str(old_string ...

随机推荐

  1. RVCT编译错误 Cannot obtain license for Compiler

    找不到文件 找不到文件 Error: C9932E: Cannot obtain license for Compiler (feature compiler) with license versio ...

  2. Mysql主从复制（重置版）

    MySQL Replication是Mysql自带的一种功能,可以实现将数据从一台数据库服务器(master)复制到一台或多台数据库服务器(slave),默认情况下属于异步复制,无需维持长连接.通过配 ...

  3. ABAP程序并行处理

    CASE1. 程序中 start new task ,并在后面获取处理结果 *"------------------------------------------------------- ...

  4. delphi中TTreeView的使用方法

    [学习万一老师博客摘要] TTreeView 与两个重要的类相关:TTreeNodes.TTreeNode . TTreeNodes即是TTreeView 的Items属性,TTreeNodes是TT ...

  5. Spring Cloud(7.2)：配置Producer Server

    我们首先创建一个生产者服务.这里以一个商品价格服务为例,这个微服务可以对商品-价格信息进行增删改查,当有商品-价格信息被更新或删除,则该微服务发送消息,告诉其他调用它的系统这条信息已经被修改. 配置p ...

  6. 使用 ServiceStack.Text 序列化 json

    相信做 .net 开发的朋友经常会遇到 json 序列化这样的需要,今天发篇文章总结下自己使用 ServiceStack.Text 来序列化 json.它的速度比 Newtonsoft.Json 快很 ...

  7. Docker 容器的通信(十二)

    目录 一.容器间通信 1.IP 通信 2.Docker DNS Server 3.joined 容器 二.容器访问外部网络 三.外部网络访问容器 1.随机端口 2.指定端口 3.不指定任何端口. 4. ...

  8. 【c# 学习笔记】接口

    一.什么是接口 接口 可以理解为对一组方法声明进行的同一命名,但这些方法没有提供任何实现.也就是说,把一组方法声明在一个接口中,然后继承于该接口的类都 需要实现这些方法. 例如,很多类型(比如int ...

  9. 常见问题:计算机网络/运输层/TCP

    TCP 面向连接,全双工,点对点. TCP头格式 TCP包没有IP地址,IP地址在网络层的IP协议中,TCP包包括源端口号,目标端口号 一个TCP连接需要四个元祖表明是同一连接(src_ip,src_ ...

  10. 关于PADS的一些概念和实用技巧（一）

    关于PADS的一些概念和实用技巧(一) 声明:引用请注明出处http://blog.csdn.net/lg1259156776/ 1. 关于part,CAE Decal,PCB Decal Part ...