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


Posted in Javascript onJuly 29, 2014

因用户要求方与TextRange对象结缘,用于处理JavaScript对象文本部分内容的一个对象。

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

获取输入框中的光标位置的整个代码其实很短,只是这些对象和方法不太常用而已。

Js代码

<span style="font-size: medium;"><script language="javascript"> 

function GetCursorPsn(txb) 

{ 

var slct = document.selection; 

var rng = slct.createRange(); 

txb.select(); 

rng.setEndPoint("StartToStart", slct.createRange()); 

var psn = rng.text.length; 

rng.collapse(false); 

rng.select(); 

return psn; 

} 

</script></span>

这里说一下使用这个GetCursorPsn()方法后,会给输入框操作带来的副作用。

对于输入框

Html代码

<span style="font-size: medium;"><input type="text" onkeydown="GetCursorPsn(this)"></span>

它将不能再使用Shift+左右这两个方向键来选择文本;对于

Html代码

<span style="font-size: medium;"><textarea onkeydown="GetCursorPsn(this)"></textarea></span>

,将不能再使用Shift+上下左右四个方向键来选择文本。因为代码在获取了当前光标到文本的startPoint后,调用rng.collapse(false );会 改变文本筐内文本的EditPoint。

1、满足用户要求代码片段,使用上下左右四个键实现文本框的跳转,同时选择其文本框内容,从而方便用户修改,代码如下:

Js代码

<span style="font-size: medium;">var range = $currentTextfield.createTextRange();//$currentTextfield为jQuery对象 

range.moveStart('character',0); 

range.select();</span>

以下是舶来的一片个人感觉还算不错的关于TextRange的文章:

Html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<title> new document </title> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<style> 

body { font-size:12px; } 

#show { background-color:#CCFF99; } 

</style> 

</head> 

<body> 

<textarea id="content" cols="30" rows="10"> 

河中鱼类离奇死亡,下游居民频染怪病,沿岸植物不断变异,是残留农药?还是生化攻击?敬请关注今晚CCTV-10《科学探索》,即将播出的专题节目:《神秘的河边洗脚人--中国男足》 

</textarea> 


<button id="btn">获取选中值</button> 

<div id="show"></div> 

<script> 

String.prototype.trim = function() { 

return this.replace(/^\s+|\s+$/g, ""); 

} 

/* 方法一 FF下有点问题 */ 

function getSelectText() { 

try{ 

// IE: document.selection.createRange() W3C:window.getSelection() 

var selectText = (document.selection && document.selection.createRange )? document.selection.createRange().text : window.getSelection().toString(); 

if(selectText != null && selectText.trim() != ""){ 

return selectText; 

} 

}catch(err){} 

} 

/* 方法二 */ 

function getSelectText2(id) { 

var t = document.getElementById(id); 

if(window.getSelection) { 

if(t.selectionStart != undefined && t.selectionEnd != undefined) { 

return t.value.substring(t.selectionStart, t.selectionEnd); 

} else { 

return ""; 

} 

} else { 

return document.selection.createRange().text; 

} 

} 

document.getElementById('btn').onclick = function() { 

document.getElementById('show').innerHTML = getSelectText2('content'); 

} 

</script> 

</body> 

</html>
Javascript 相关文章推荐
javascript实现二分查找法实现代码
Nov 12 Javascript
10款新鲜出炉的 jQuery 插件(Ajax 插件,有幻灯片、图片画廊、菜单等)
Jun 08 Javascript
JavaScript 反科里化 this [译]
Sep 20 Javascript
jQuery通用的全局遍历方法$.each()用法实例
Jul 04 Javascript
Javascript类型系统之undefined和null浅析
Jul 13 Javascript
谈谈JS中常遇到的浏览器兼容问题和解决方法
Dec 17 Javascript
jQuery ajax实现省市县三级联动
Mar 07 Javascript
angularjs实现简单的购物车功能
Sep 21 Javascript
vue实现element-ui对话框可拖拽功能
Aug 17 Javascript
判断iOS、Android以及PC端的示例代码
Nov 15 Javascript
Vue数据绑定简析小结
May 07 Javascript
原生js实现点击轮播切换图片
Feb 11 Javascript
js键盘事件的keyCode
Jul 29 #Javascript
js识别不同浏览器基于userAgent做判断
Jul 29 #Javascript
让浏览器DOM元素最后加载的js方法
Jul 29 #Javascript
js实现遮罩层划出效果是生成div而不是显示
Jul 29 #Javascript
解释&amp;&amp;和||在javascript中的另类用法
Jul 28 #Javascript
wap手机图片滑动切换特效无css3元素js脚本编写
Jul 28 #Javascript
jQuery内置的AJAX功能和JSON的使用实例
Jul 27 #Javascript
You might like
php递归函数三种实现方法及如何实现数字累加
2015/08/07 PHP
php compact 通过变量创建数组
2016/11/15 PHP
PHPStudy下如何为Apache安装SSL证书的方法步骤
2019/01/23 PHP
PHP goto语句用法实例
2019/08/06 PHP
Laravel 模型关联基础教程详解
2019/09/17 PHP
javascript 中对象的继承〔转贴〕
2007/01/22 Javascript
JavaScript 实现模态对话框 源代码大全
2009/05/02 Javascript
javascript之AJAX框架使用说明
2010/04/24 Javascript
JS 如果改变span标签的是否隐藏属性
2011/10/06 Javascript
js实现正方形颜色从下往上升的效果
2014/08/04 Javascript
js HTML5上传示例代码完整版
2016/10/10 Javascript
微信小程序 教程之数据绑定
2016/10/18 Javascript
Angular4开发解决跨域问题详解
2017/08/28 Javascript
详解element-ui表格中勾选checkbox,高亮当前行
2019/09/02 Javascript
微信小程序实现简单购物车功能
2020/12/30 Javascript
[29:23]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第一场1
2014/05/23 DOTA
Python FTP操作类代码分享
2014/05/13 Python
Python连接MySQL并使用fetchall()方法过滤特殊字符
2016/03/13 Python
Python使用Flask-SQLAlchemy连接数据库操作示例
2018/08/31 Python
python实现彩色图转换成灰度图
2019/01/15 Python
PyQt弹出式对话框的常用方法及标准按钮类型
2019/02/27 Python
解决Jupyter notebook中.py与.ipynb文件的import问题
2020/04/21 Python
Python虚拟环境venv用法详解
2020/05/25 Python
Python基础教程之输入输出和运算符
2020/07/26 Python
如何使用pycharm连接Databricks的步骤详解
2020/09/23 Python
css3实现顶部社会化分享按钮示例
2014/05/06 HTML / CSS
女子锻炼服装和瑜伽服装:Splits59
2019/03/04 全球购物
俄罗斯首家面向中国消费者的一站式购物网站:Wruru
2020/05/08 全球购物
小学优秀班干部事迹材料
2014/05/25 职场文书
代理人委托书
2014/09/16 职场文书
个人学习群众路线心得体会
2014/11/05 职场文书
2016年感恩节寄语
2015/12/07 职场文书
幼儿园中班教学反思
2016/03/03 职场文书
Vue3.0中Ref与Reactive的区别示例详析
2021/07/07 Vue.js
Spring Boot 排除某个类加载注入IOC的操作
2021/08/02 Java/Android
HDFS免重启挂载新磁盘
2022/04/06 Servers