专栏首页技术博文可编辑DIV设置光标位置

可编辑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 条评论
登录 后参与评论

相关文章

  • Linux环境下Swap配置方法

    Linux环境下Swap配置方法 场景: 今天下午安装一个CentOS6.5操作系统,忘记配置swap分区。看看如何安装系统之后,增加和删除swap分区...

    joshua317
  • 关于inodes占用100%的问题及解决方法

    系统:Centos;一般的Linux系统也可以用这种方法。 情况描述:今天session文件写入时,写入不了,而且连接到服务器上开启服务都开不了,起始以为磁盘空...

    joshua317
  • linux最常用的20条命令

    玩过Linux的人都会知道,Linux中的命令的确是非常多,但是玩过Linux的人也从来不会因为Linux的命令如此之多而烦恼,因为我们只需要掌握我们最常用的命...

    joshua317
  • Vim 常用快捷键及键盘图

    用户1130771
  • vim 快捷键技巧总结

    vi(vim)是上Linux非常常用的编辑器,很多Linux发行版都默认安装了vi(vim)。vi(vim)命令繁多但是如果使用灵活之后将会大大提高效率。vi是...

    阳光岛主
  • vi 常用命令行

      a) 一般模式: vi 处理文件时,一进入该文件,就是一般模式了.   b) 编辑模式:在一般模式下可以进行删除,复制,粘贴等操作,却无法进行编辑操作。等按...

    疯狂的技术宅
  • 史上最全VIM使用手册

    vim是一个向上兼容于vi的文本编辑器,可用于编辑各种纯文本。它对编辑程序特别有用。 基本模式: 编辑模式:默认编辑文件进入的模式 输入模式: 末行模式:内置的...

    小小科
  • Linux 学习笔记(1) 查看文件内容

    cat filename |grep key1 |grep key2 |grep key3

    披头
  • Linux笔记:vi常用命令

    vi编辑器是所有Unix及Linux系统下标准的编辑器,在很多时候我们都需要使用vi修改服务端配置,vi其实非常强大,只要命令使用熟练的情况下,编辑速度并不亚于...

    朝雨忆轻尘
  • linux下编辑VI窗口插入与编辑命令

    前言 在嵌入式linux开发中,进行需要修改一下配置文件之类的,必须使用vi,因此,熟悉 vi 的一些基本操作,有助于提高工作效率。 一,模式 vi编辑器有3...

    学到老

扫码关注云+社区

领取腾讯云代金券