光标定位等TextRange的操作的范例代码

光标位置

INPUT{border: 1 solid #000000}
BODY,TABLE{font-size: 10pt}

点击 TextArea 实现光标定位

我怕来不及我要抱着你，直到感觉你的绉纹有了岁月的痕迹，直到视线变得模糊直到不能呼吸
为了你我愿意
动也不能动也要看着你，直到感觉你的发线有了白雪的痕迹，直到肯定你是真的直到失去力气让我们形影不离
如果全世界我也可以放弃，至少还有你值得我去珍惜而你在这里就是生命的奇迹
也许全世界我也可以忘记，就是不愿意失去你的消息你掌心的痣我总记得在哪里
我们好不容易我们身不由已，我怕时间太快不够将你看仔细，我怕时间太慢日夜担心失去你恨不得一夜之间白头永不分离

function movePoint()
{
var pn = parseInt(pnum.value);
if(isNaN(pn))
return;
var rng = box.createTextRange();
rng.moveStart("character",pn);
rng.collapse(true);
rng.select();
returnCase(rng)
}
function tellPoint()
{
var rng = event.srcElement.createTextRange();
rng.moveToPoint(event.x,event.y);
rng.moveStart("character",-event.srcElement.value.length)
pnum.value = rng.text.length
returnCase(rng)
}

function returnCase(rng)
{
bh.innerText = rng.boundingHeight;
bl.innerText = rng.boundingLeft;
bt.innerText = rng.boundingTop;
bw.innerText = rng.boundingWidth;
ot.innerText = rng.offsetTop;
ol.innerText = rng.offsetLeft;
t.innerText = rng.text;
}

function selectText(sp,ep)
{
sp = parseInt(sp)
ep = parseInt(ep)
if(isNaN(sp)||isNaN(ep))
return;
var rng = box.createTextRange();
rng.moveEnd("character",-box.value.length)
rng.moveStart("character",-box.value.length)
rng.collapse(true);
rng.moveEnd("character",ep)
rng.moveStart("character",sp)
rng.select();
returnCase(rng);
}
var rg = box.createTextRange();
function findText(tw)
{
if(tw=="")
return;
var sw = 0;
if(document.selection)
{
sw = document.selection.createRange().text.length;
}
rg.moveEnd("character",box.value.length);
rg.moveStart("character",sw);
if(rg.findText(tw))
{
rg.select();
returnCase(rg);
}

if(rg.text!=tw)
{
alert("已经搜索完了")
rg = box.createTextRange()
}

}

光标位置：

选择指定范围： --

选择查找字符 ：

 boundingHeight: 
boundingWidth: 
boundingTop: 
boundingLeft: 
offsetLeft: 
offsetTop: 
text: 

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • 教学演示-UBB,剪贴板,textRange及其他

    这是一个给新手学习代码的帖子,包含以下内容: 如何使用UBB代码,如何用js与剪贴板交互,如何使用textRange对象,如何使用自定义的快捷键操作,如何自动随窗口大小调整页面内容尺寸,正则表达式的使用等等 请仔细阅读代码,有问题请提问,目前代码开发完成度80%,IE only Blue Idea UBB Code Edit * { margin:0px; padding:0px; } html, body { background-color:buttonface; width:100%; h

  • Using the TextRange Object

    Most users will only want to use the innerText/innerHTML and outerText/outerHTML properties and methods discussed previously. However, there is some more advanced text manipulation that can be done using a "text range" object. The TextRange obje

  • 使用TextRange获取输入框中光标的位

    TextRange是用来表现HTML元素中文字的对象,虽然我们平时不太常用这个对象,可是它却在IE4.0中就已提供了.不过TextRange提供的调用方法却都比较晦涩,那么我们能拿它做些什么呢? TextRange的传统用途是对用户在Web页上用鼠标圈选的文字内容的操作,比如变化.删除.新增等.但其经典的用途却是,在Web页面中查找文字(这个比较简单)和获取输入框光标的位置.其中后者又有可以衍生出很多更有用的用途,比如:限制输入的MaskTextBox,其核心技术点就是获取输入框的光标位置,然后

  • JavaScript中textRange对象使用方法小结

    TextRange对象是动态HTML(DHTML)的高级特性,使用它可以实现很多和文本有关的任务,例如搜索和选择文本.文本范围让您可以选择性的将字符.单词和句子从文档中挑选出来.TextRange对象是在HTML文档将要显示的文本流上建立开始和结束位置的抽象对象. 下面是TextRange的常用属性与方法: 属性 boundingHeight 获取绑定TextRange对象的矩形的高度 boundingLeft 获取绑定TextRange 对象的矩形左边缘和包含TextRange对象的左侧之间的

  • 使用TextRange获取输入框中光标的位置的代码

    TextRange是用来表现HTML元素中文字的对象,虽然我们平时不太常用这个对象,可是它却在IE4.0中就已提供了.不过TextRange提供的调用方法却都比较晦涩,那么我们能拿它做些什么呢? TextRange的传统用途是对用户在Web页上用鼠标圈选的文字内容的操作,比如变化.删除.新增等.但其经典的用途却是,在Web页面中查找文字(这个比较简单)和获取输入框光标的位置.其中后者又有可以衍生出很多更有用的用途,比如:限制输入的MaskTextBox,其核心技术点就是获取输入框的光标位置,然后

  • js createRange与createTextRange的一些用法实例

    一.返回createTextRange的text和htmlText [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 二.获取指定文本框中的选中的文字:只响应第一个文本框 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 三.页面文本倒序查找 abababababababa [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 四.聚焦控件后把光标放到最后 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 五.得到文本框内光标位置 [Ctrl+A 全选 注:如

  • 处理文本部分内容的TextRange对象应用实例

    因用户要求方与TextRange对象结缘,用于处理JavaScript对象文本部分内容的一个对象. TextRange是用来表现HTML元素中文字的对象,虽然我们平时不太常用这个对象,可是它却在IE4.0中就已提供了.不过TextRange提供的调用方法却都比较晦涩,那么我们能拿它做些什么呢? TextRange的传统用途是对用户在Web页上用鼠标圈选的文字内容的操作,比如变化.删除.新增等.但其经典的用途却是,在Web页面中查找文字(这个比较简单)和获取输入框光标的位置.其中后者又有可以衍生出

  • createTextRange()的使用示例含文本框选中部分文字内容

    复制代码 代码如下: <script language="javascript"> function test() { var rng=document.body.createTextRange(); alert(rng.text) } function test1() { var rng=document.body.createTextRange(); alert(rng.htmlText) } </script> <input type="b

  • 光标定位等TextRange的操作的范例代码

    光标位置 INPUT{border: 1 solid #000000} BODY,TABLE{font-size: 10pt} 点击 TextArea 实现光标定位 我怕来不及我要抱着你,直到感觉你的绉纹有了岁月的痕迹,直到视线变得模糊直到不能呼吸 为了你我愿意 动也不能动也要看着你,直到感觉你的发线有了白雪的痕迹,直到肯定你是真的直到失去力气让我们形影不离 如果全世界我也可以放弃,至少还有你值得我去珍惜而你在这里就是生命的奇迹 也许全世界我也可以忘记,就是不愿意失去你的消息你掌心的痣我总记得在

  • js光标定位文本框回车表单提交问题的解决方法

    本文实例讲述了js光标定位文本框回车表单提交问题的解决方法.分享给大家供大家参考.具体分析如下: 当光标定位在辅助查找的文本框后回车,页面会出现方法的返回的json串. 原因:When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form. 翻译一下:当form中只有一个in

  • javascript textarea光标定位方法(兼容IE和FF)

    今天在做一个博客转发的功能,就像新浪微薄转播的那个功能一样,有一个textArea,就是我们发微薄的那个框,别人的微薄都有一个转发的按钮,当我们点击这个转发按钮的时候,他的微薄就会进入到textArea中,看起来很简单的文本框赋值,其实难点就在于,这时候的光标是定位在最前面的. 于是搜索了baidu,google,找到了 IE下面的方法 复制代码 代码如下: var tea=document.getElementById("文本框的ID"); var txt=textArea.crea

  • C语言游戏必备:光标定位与颜色设置的实现方法

    喜欢编写游戏的朋友们,你们有福了,这个资料足以让你玩转WINDOWS和Linux下的光标定位以及颜色,enjoy it. 一.WINDOWS:1．光标定位函数: 复制代码 代码如下: #include <windows.h>#include <conio.h>/****** 光标移到指定位置 ********************************/void gotoxy(HANDLE hOut, int x, int y){      COORD pos;      po

  • ORACLE中查找定位表最后DML操作的时间小结

    在Oracle数据库中,如何查找,定位一张表最后一次的DML操作的时间呢? 方式有三种,不过都有一些局限性,下面简单的解析.总结一下. 1:使用ORA_ROWSCN伪列获取表最后的DML时间 ORA_ROWSCN伪列是Oracle 10g开始引入的,可以查询表中记录最后变更的SCN.然后通过SCN_TO_TIMESTAMP函数可以将SCN转换为时间戳,从而找到最后DML操作时SCN的对应时间.但是,默认情况下,每行记录的ORA_ROWSCN是基于Block的,除非在建表的时候开启行级跟踪. SE

  • Vue中div contenteditable 的光标定位方法

    在Vue做项目时,做了一个div[contenteditable=true]的组件作为文本输入框 在非手动输入值后,光标会丢失,经测试以下这段代码可用,直接将光标定位到最后 function keepLastIndex(obj) { console.log(obj) console.log(window.getSelection) console.log(document.selection) if (window.getSelection) { //ie11 10 9 ff safari ob

  • Python文件操作基本流程代码实例

    Python文件操作基本流程代码实例

    文件操作之基本流程 #文本 近日,上市药企--浙江莎普爱思药业股份有限公司频遭质疑. 12月2日,一篇名为<一年卖出7.5亿的洗脑"神药",请放过中国老人>的文章称, 多位眼科医生并不认可莎普爱思滴眼液的"白内障防治功效".质疑者认为, 莎普爱思滴眼液是"假科普,真营销",通过广告误导患者. 针对质疑,莎普爱思3日晚发布的公告称, 0.5%苄达 赖氨酸滴眼液已于上世纪90年代通过了临床试验, 是一种安全的.有效的抗白内障药物.假的 #

  • C++ I/O文件读写操作的示例代码

    IO: 向设备输入数据和输出数据C++的IO流 c++中,必须通过特定的已经定义好的类, 来处理IO(输入输出) 文件流: 对文件进行读写操作 头文件: 类库: ifstream 对文件输入(读文件) ofstream 对文件输出(写文件) fstream 对文件输入或输出 //写文件 #include <fstream> #include <iostream> #include <string> using namespace std; int main() { st

  • pyqt5 textEdit、lineEdit操作的示例代码

    1.定义一个textEdit/lineEdit:(lineEdit只需要将代码中的QTextEdit改为QLineEdit) self.textEdit = QtWidgets.QTextEdit(Dialog) self.textEdit.setGeometry(QtCore.QRect(70, 90, 171, 391)) self.textEdit.setObjectName("textEdit") self.textEdit.setReadOnly(True)#设置为只读,即可

  • C# 利用Selenium实现浏览器自动化操作的示例代码

    概述 Selenium是一款免费的分布式的自动化测试工具,支持多种开发语言,无论是C. java.ruby.python.或是C# ,你都可以通过selenium完成自动化测试.本文以一个简单的小例子,简述C# 利用Selenium进行浏览器的模拟操作,仅供学习分享使用,如有不足之处,还请指正. 涉及知识点 要实现本例的功能,除了要掌握Html ,JavaScript,CSS等基础知识,还涉及以下知识点: log4net:主要用于日志的记录和存储,本例采用log4net进行日志记录,便于过程跟踪

随机推荐