可编辑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中的光标移动到最后面了..

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏玩转JavaEE

MongoDB副本集其他细节

副本集环境的搭建以及一些基本的操作我们都了解了,本文我们来看看这个数据复制到底是怎么实现的。 ---- 数据同步方式 MongoDB中的复制功能主要是使用操作日...

36950
来自专栏听雨堂

微信小程序的同步操作

小程序里,大多数操作都是异步操作,一些重要的操作,如从网上获取重要变量值,必须要保证有值,后续操作才有意义。但异步操作,又必须把处理放到回调中,代码可读性降低,...

674100
来自专栏程序员的知识天地

JavaWeb学习——4.XML

要写xml,第一步必须要有一个文档声明(写了文档声明之后,表示写xml文件的内容)

13420
来自专栏贺贺的前端工程师之路

React中的Redux

整个应用的state被存储在一棵object tree中,并且这个object tree只存在于唯一一个store中。

11820
来自专栏小狼的世界

封装内容和功能 – YUI TabView使用小记

本文主要内容取自 Caridy Patino 在2008年发布的文章,原文中使用的是YUI2,笔者对例子做了一些更新,均使用了YUI3.1.1,文章中讨论的这个...

11420
来自专栏偏前端工程师的驿站

Java魔法堂:注释和注释模板

一、注释                                     1. 注释类型      [a]. 单行注释 // 单行注释 String ...

29160
来自专栏前端下午茶

Vue项目数据动态过滤实践

这个问题是在下在做一个Vue项目中遇到的实际场景,这里记录一下我遇到问题之后的思考和最后怎么解决的(老年程序员记性不好 -。-),过程中会涉及到一些Vue源码的...

37140
来自专栏前端布道

JavaScript之Event Loop

先看段代码: console.log(1); setTimeout(function () { console.log(2); new Pr...

313120
来自专栏Golang语言社区

Golang 中的并发限制与超时控制

前言 上回在 用 Go 写一个轻量级的 ssh 批量操作工具 里提及过,我们做 Golang 并发的时候要对并发进行限制,对 goroutine 的执行要有超时...

96860
来自专栏idba

Python模块之subprocess

一 简介 在使用Python 开发MySQL自动化相关的运维工具的时候,遇到一些有意思的问题,本文介绍Python的 subprocess 模块以及如何和My...

15410

扫码关注云+社区

领取腾讯云代金券