在js中,光标是一个对象,当你选中某个元素的时候才会出现光标对象。比如:我们点击一个输入框,实际会产生一个选中对象-selection,这个对象我们可以通过indow.getSelection()来获取;selection只存在1个,所以当你切换到其他输入框额时候,selection同样会跟着变化的。在选中的情况下有一个光标叫做range,和selection一样。

在contenteditable 属性中,当点击该区域的时候,光标默认显示在区域内容最后一位。如:

<div id="box"  contenteditable=true>
这是内容哦!
</div>

需要点击才出现光标,而且它的位置在内容区域的最后面,如果我们需要打开页面默认就出现,而且出现在第一个位置上,该如何实现呢?下面将给出js的实现方法:

熊猫办公https://www.wode007.com/sites/73654.html

方法一:

 var p = document.getElementById('box'),
s = window.getSelection(),
r = document.createRange();
r.setStart(p, );
r.setEnd(p, );
s.removeAllRanges();
s.addRange(r);

如果你需要把元素清空,或者对应内容为空的时候,你可以这样做:

 var p = document.getElementById('box'),
s = window.getSelection(),
r = document.createRange();
p.innerHTML = '\u00a0';
r.selectNodeContents(p);
s.removeAllRanges();
s.addRange(r);
document.execCommand('delete', false, null);

方法二:

 var box= document.getElementById('box');
setTimeout(function() {
box.focus();
}, );

给box设置获取焦点。然后放置setTimeout中,延迟执行。

html5中contenteditable 光标_如何设置光标位置的更多相关文章

  1. html5中contenteditable属性如果过滤标签,过滤富文本样式

    ​​在div中使用contenteditable=”true”可以达到模拟输入框的效果,但是当我们复制其他网页内容进去的时候,会发现连带的样式也一起复制进去了.很明显我们不需要复制富文本样式,那么如何 ...

  2. html元素contenteditable属性如何定位光标和设置光标

    最近在山寨一款网页微信的产品,对于div用contenteditable属性做的编辑框有不少心得,希望可以帮到入坑的同学. 废话不多说了,我们先来理解一下HTML的光标对象是如何工作的,后面我会贴完整 ...

  3. 使用C#模拟键盘输入、鼠标移动和点击、设置光标位置及控制应用程序的显示

    1.模拟键盘输入(SendKeys) 功能:将一个或多个按键消息发送到活动窗口,就如同在键盘上进行输入一样. 语法:SendKeys.Send(string keys);SendKeys.SendWa ...

  4. PADS Router VX.2.3 设置光标的类型

    操作系统:Windows 10 x64 工具:PADS Router VX.2.3 菜单:Tools > Options...(快捷键:Ctrl + <Enter>) 在Option ...

  5. js设置光标插入文字和HTML

    原文链接:js设置光标插入文字和HTML 在一个textarea的某个光标位置插入文字或者在某个编辑器中插入图片html内容,我最近经常和这些打交道,但总是一团模糊,今天整理一下关于如何插入文字,设置 ...

  6. javascript获取以及设置光标位置

    一. 获取光标位置: // 获取光标位置 function getCursortPosition (textDom) { var cursorPos = 0; if (document.selecti ...

  7. C#中使用SelectionStart属性指定输入框光标位置

    今天工作中遇到一个小BUG需要修改,需求为在文本框输入的过程中,如果数字是以0开头则自动消除0 如输入012,则显示12 很容易想到在textbox的text changed事件中判断,如果text是 ...

  8. JS获取和设置光标的位置

    <html> <head> <script language="javascript"> function getCursortPosition ...

  9. C++ 设置光标问题

    一.隐藏光标 1.引入头文件window.h 2.  定义光标信息结构体变量 CONSOLE_CURSOR_INFO  cursor info={1,0}; typedef struct _CONSO ...

随机推荐

  1. 实用!看Python如何光速合并多个PDF

    大家好,今天分享一个实用的办公脚本:将多个PDF合并为一个PDF, 例如我手上现在有如下3个PDF分册,需要整合成一个完整的PDF. 如果换成你操作的话,是不是打开百度搜索:PDF合并,然后去第三方网 ...

  2. 汇编指令:push、pop

    8086CPU出栈入栈都是以字为单位进行的. push ax 由一下两步完成 1.SP=SP-2 2.将ax中的内容送入SS:SP指向的内存单元 pop ax 1.将SS:SP指向的内存单元中的内容送 ...

  3. 变分(图)自编码器不能直接应用于下游任务(GAE, VGAE, AE, VAE and SAE)

        自编码器是无监督学习领域中一个非常重要的工具.最近由于图神经网络的兴起,图自编码器得到了广泛的关注.笔者最近在做相关的工作,对科研工作中经常遇到的:自编码器(AE),变分自编码器(VAE),图 ...

  4. ubuntu opensips环境搭建

    1.安装前准备,需要安装如下工具: perl. libdbi-perl. libdbd-mysql-perl. libdbd-pg-perl. libfrontier-rpc-perl. libter ...

  5. @luogu - P6109@ [Ynoi2009]rprmq

    目录 @description@ @solution@ @accepted code@ @details@ @description@ 有一个 n×n 的矩阵 a,初始全是 0,有 m 次修改操作和 ...

  6. 密码学数论基础部分总结之 有限域GF(p) Galois Fields

    今天花了一下午的时间学习密码学的数论部分,下面将学到的内容进行一下总结,也算是加深记忆.我本身对密码学这方面比较感兴趣,而且本节出现了许多数学公式,使用刚刚学习的LaTex公式来呈现出来,练习练习,何 ...

  7. program files (x86)\microsoft visual studio 14.0\vc\include\xtree,如果没有找到,下标溢出了,就报错咯

    ---------------------------Microsoft Visual C++ Runtime Library---------------------------Debug Asse ...

  8. Git 居然可以用来跟女神聊天?

    Git 是用来做啥的?想必码农朋友都知道,Git 是版本控制软件,是软件开发过程中团队协作不可或缺的软件. 但是,作为版本控制软件的 Git ,能跟聊天工具扯上关系吗?这二者似乎毫无关系,但脑洞大开的 ...

  9. WeChair Plus版项目介绍

    这个作业属于哪个课程 软件工程 (福州大学至诚学院 - 计算机工程系) 团队名称 WeChair 这个作业要求在哪里 团队作业第一次:团队作业第一次(2) 这个作业的目标 项目介绍,项目修改 作业正文 ...

  10. Windows7/10实现ICMP(ping命令)

    如果觉得本文如果帮到你或者你想转载都可以,只需要标注出处即可.谢谢 利用ICMP数据包.C语言实现Ping命令程序,能实现基本的Ping操作,发送ICMP回显请求报文,用于测试—个主机到只一个主机之间 ...