处理文本部分内容的TextRange对象应用实例
2023-06-13 09:15:40 时间
因用户要求方与TextRange对象结缘,用于处理JavaScript对象文本部分内容的一个对象。
TextRange是用来表现HTML元素中文字的对象,虽然我们平时不太常用这个对象,可是它却在IE4.0中就已提供了。不过TextRange提供的调用方法却都比较晦涩,那么我们能拿它做些什么呢?
TextRange的传统用途是对用户在Web页上用鼠标圈选的文字内容的操作,比如变化、删除、新增等。但其经典的用途却是,在Web页面中查找文字(这个比较简单)和获取输入框光标的位置。其中后者又有可以衍生出很多更有用的用途,比如:限制输入的MaskTextBox,其核心技术点就是获取输入框的光标位置,然后使用正则表达式判断输入内容。还有我后面会介绍的"使用方向键在输入框矩阵中自然的导航",核心技术点也是获取输入框中的光标位置。
获取输入框中的光标位置的整个代码其实很短,只是这些对象和方法不太常用而已。
Js代码
<spanstyle="font-size:medium;"><scriptlanguage="javascript"> functionGetCursorPsn(txb) { varslct=document.selection; varrng=slct.createRange(); txb.select(); rng.setEndPoint("StartToStart",slct.createRange()); varpsn=rng.text.length; rng.collapse(false); rng.select(); returnpsn; } </script></span>
这里说一下使用这个GetCursorPsn()方法后,会给输入框操作带来的副作用。
对于输入框
Html代码
<spanstyle="font-size:medium;"><inputtype="text"onkeydown="GetCursorPsn(this)"></span>
它将不能再使用Shift+左右这两个方向键来选择文本;对于
Html代码
<spanstyle="font-size:medium;"><textareaonkeydown="GetCursorPsn(this)"></textarea></span>
,将不能再使用Shift+上下左右四个方向键来选择文本。因为代码在获取了当前光标到文本的startPoint后,调用rng.collapse(false);会改变文本筐内文本的EditPoint。
1、满足用户要求代码片段,使用上下左右四个键实现文本框的跳转,同时选择其文本框内容,从而方便用户修改,代码如下:
Js代码
<spanstyle="font-size:medium;">varrange=$currentTextfield.createTextRange();//$currentTextfield为jQuery对象 range.moveStart("character",0); range.select();</span>
以下是舶来的一片个人感觉还算不错的关于TextRange的文章:
Html代码
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <title>newdocument</title> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <style> body{font-size:12px;} #show{background-color:#CCFF99;} </style> </head> <body> <textareaid="content"cols="30"rows="10"> 河中鱼类离奇死亡,下游居民频染怪病,沿岸植物不断变异,是残留农药?还是生化攻击?敬请关注今晚CCTV-10《科学探索》,即将播出的专题节目:《神秘的河边洗脚人--中国男足》 </textarea> <buttonid="btn">获取选中值</button> <divid="show"></div> <script> String.prototype.trim=function(){ returnthis.replace(/^\s+|\s+$/g,""); } /*方法一FF下有点问题*/ functiongetSelectText(){ try{ //IE:document.selection.createRange()W3C:window.getSelection() varselectText=(document.selection&&document.selection.createRange)?document.selection.createRange().text:window.getSelection().toString(); if(selectText!=null&&selectText.trim()!=""){ returnselectText; } }catch(err){} } /*方法二*/ functiongetSelectText2(id){ vart=document.getElementById(id); if(window.getSelection){ if(t.selectionStart!=undefined&&t.selectionEnd!=undefined){ returnt.value.substring(t.selectionStart,t.selectionEnd); }else{ return""; } }else{ returndocument.selection.createRange().text; } } document.getElementById("btn").onclick=function(){ document.getElementById("show").innerHTML=getSelectText2("content"); } </script> </body> </html>
相关文章
- 交换机vlan配置实例_h3c vlan配置
- 如何利用python读excel数据_python在excel应用实例
- 【Android 应用开发】Android 返回堆栈管理 ( 默认启动模式 | 栈顶复用启动模式 | 栈内复用启动模式 | 单实例启动模式 | CLEAR_TOP 标识 )
- Java程序应用实例:“你好 Java”
- MySQL中降序排序应用实例(mysql降序排序)
- Linux下MySQL数据库应用实例(linux使用mysql)
- Oracle实例安装指南:实现开箱即用(oracle实例安装目录)
- Linux编程实战:实例解析应用(linux应用编程实例)
- Linux 命令实例精选:掌握技能的利器 (linux命令实例大全)
- MongoDB实战经验分享:探索应用案例(mongodb应用实例)
- Mysql中sin函数的应用与实例解析(mysql中sin())
- MySQL函数instrt的应用及实例分析(mysql中instrt)
- 掌握Oracle中视图的实例应用(oracle 中视图实例)
- Access转SqlServer问题实例说明
- javascript针对DOM的应用实例(一)
- SSB(SQLserviceServiceBroker)入门实例介绍
- 实例说明为什么不要行内使用javascript
- ThinkPHP之N方法实例详解
- 利用a标签自动解析URL分析网址实例
- PHP队列用法实例
- thinkphp文件引用与分支结构用法实例
- php可生成缩略图的文件上传类实例
- WinForm自定义控件应用实例
- jQuery应用之jQuery链用法实例
- C++实现inlinehook的原理及应用实例
- C#中string和StingBuilder内存中的区别实例分析