<div contenteditable="true"></div>
我在这里面输入了123456789这个几个字符
当我把鼠标放在某个数字的后面时，要获取鼠标是在哪个位置
比如我的光标在3后面，应该得到3，在1前面应该是0，在6后面应该是6
就是当我输入任意字符时，获得光标所在的是什么位置
我要的是ie的方法
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
- <html>
- <head>
- <title> new document </title>
- </head>
- <body>
- <div contentEditable="true" style="height:50px; border:2px solid red;"></div>
- 光标前的字符：<span id="selection"></span>
- <script language="javascript">
- <!--
- 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);
- }
- document.getElementById("selection").innerText = srcele.innerText.substring(cursor - 1, cursor);
- }
- //-->
- </script>
- </body>
- </html>
分享到：
相关推荐
3.29 光标停在文字最后 3.30 分行取textarea中的值 3.31 自动插入文本 3.32 选取textarea的指定行 3.33 文本放大镜 3.34 文本框的默认输入法 3.35 文本框显示网页中选中的内容 3.36 文字的垂直滚动 3.37 文字幻灯片 ...
3.29 光标停在文字最后 3.30 分行取textarea中的值 3.31 自动插入文本 3.32 选取textarea的指定行 3.33 文本放大镜 3.34 文本框的默认输入法 3.35 文本框显示网页中选中的内容 3.36 文字的垂直滚动 3.37 文字幻灯片 ...
鼠标变换当光标位置在 contenteditable 文档中发生变化时的事件发射器安装使用或或 NPM 安装。 $npm install cursor-change用法 var el = document . getElementsByTagName ( 'div' ) [ 0 ] ;var cursor = require ...
老实说，有一天我感到无聊，在我在线阅读了一篇关于 WebSockets 的文章以及如何使用 WebSockets 记录用户将光标指向您的网页的位置以进行一些真正增强的分析，然后能够“回放”之后写了这篇文章。稍后进行用户交互。...
实例042 应用CSS+DIV实现指定尺寸无边框无滚动条窗口 65 实例043 应用JavaScript实现指定尺寸无边框无滚动条窗口 67 1.8 水平导航条应用 69 实例044 图片按钮导航条 69 实例045 导航条的动画效果 71 实例046 不用...
在这里，我花了1天的时间设计出虚拟软件键盘和虚拟光标，它们可以像原始输入一样完美地协同工作。 截屏： 一些代码 HTML： < div xss=removed> < div> First: INPUT </ div> < div> < input type =" text ...
React滚动传感器 ...您可以使用它来建立一个粘性div，该div随光标移动。 import ScrollIndicator from "react-scroll-sensor" ; { ( scrollX , scrollY ) => ( Hello < / p > ) } < / ScrollIn
一个简单的图片放大效果: 参数说明: 1.berviary:String,需要被放大的图片id 2.expand:object,放大区域,如果不设置此项或者此项的id未设置,则默认为光标跟随模式,会自动创建用于显示放大区域的div. 3.clip:object,...
Ctrl+M光标移动至括号内开始或结束的位置 Ctrl+Shift+M选择括号内的内容(按住-继续选择父括号) Ctrl+/注释整行(如已选择内容，同“Ctrl+Shift+/”效果) Ctrl+Shift+/注释已选择内容 Ctrl+Space自动完成(win与...
窗口： 代码如下: <div id=”win”> <div id=”win_header”></div> </div> 一点准备工作： 要让窗口能自由移动，那么窗口的定位（position）应该采用绝对定位（absolute）； 给窗口添加标题栏，这里使用一个放在...
从开始、结束和当前光标位置转到 用于解析突出显示文件内容的自定义类 C++ 模式语言 基于 MIME 类型的自动加载 数组、指针、结构、联合、枚举、位域、命名空间、小端和大端支持、条件等等！ 有用的错误信息、语法...
主要介绍了JS实现的简单鼠标跟随DiV层效果,涉及JavaScript基于时间函数动态操作页面元素属性的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
3. 添加JavaScript功能（可选）：如果你想要在页面上模拟真实的聊天对话，你可以使用JavaScript添加一些基本的功能。 让我们从头开始，一个一个地实现这些步骤。 当然，这只是一个简单的示例，你可以根据自己的...
javascript主页弹出窗口技巧.html div span layer的区别.html email地址的分割.html ENTER键可以让光标移到下一个输入框.html IE地址栏前换成自己的图标 .html TEXTAREA自适应文字行数的多少.html title显示...
MattWeinberg24.github.io 学习HTML，CSS和Javascript的网站 进度追踪器 第1天：创建网站，基本设置，网站图标，文本存在，背景色 ...第5天：实体，Lorem，换行，锚点，超链接，光标指针，Div，下载标记，Flex容器
Javascript小技巧一箩筐 事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture(); event.srcElement.releaseCapture(); 事件按键 event.keyCode ...
光标图例被放置到一个 div 中，您需要通过向绘图添加 cursorsLegendDiv 选项来指定该div： cursorsLegendDiv :光标图例的占位符 div var plot = $.plot("#plotDiv", data, { cursors: [ { name: 'Blue cursor', ...
从开始，结束和当前光标位置转到 自定义的类似于C ++的模式语言，用于突出显示文件内容 根据MIME类型自动加载 数组，指针，结构，联合，枚举，位域，使用声明，小端和大端支持，条件等等！ 有用的错误消息，语法...
添加：切换到源代码，可视化编辑页面的光标对应源代码相应位置的定位功能 添加：扩展jQuery的标准val函数，使之能够直接读取和设置编辑器的最新值 添加：为方便外部应用的扩展，特将编辑器内部的window和document...
应该并不难-只需使用具有z-index和固定位置的全屏div。正确的？那就是我的想法。 尝试次数1 让我们使用div覆盖所有屏幕 . FullScreenOne { position : fixed; bottom : 0 ; left : 0 ; right : 0 ; top : 0 ; ...