处理文本部分内容的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 相关文章推荐
Ajax,UTF-8还是GB2312 eval 还是execScript
Nov 13 Javascript
jquery ui 1.7 ui.tabs 动态添加与关闭(按钮关闭+双击关闭)
Apr 01 Javascript
JS中数组Array的用法示例介绍
Feb 20 Javascript
javascript实现des解密加密全过程
Apr 03 Javascript
jQuery使用方法
Feb 04 Javascript
js实现数字递增特效【仿支付宝我的财富】
May 05 Javascript
详解Vue组件实现tips的总结
Nov 01 Javascript
js 索引下标之li集合绑定点击事件
Jan 12 Javascript
Angular中使用better-scroll插件的方法
Mar 27 Javascript
react中使用swiper的具体方法
May 15 Javascript
vue集成一个支持图片缩放拖拽的富文本编辑器
Jan 29 Vue.js
如何用JS实现网页瀑布流布局
Apr 24 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,不用COM,生成excel文件
2006/10/09 PHP
php流量统计功能的实现代码
2012/09/29 PHP
thinkphp的CURD和查询方式介绍
2013/12/19 PHP
PHP fopen()和 file_get_contents()应用与差异介绍
2014/03/19 PHP
Zend Framework动作助手(Zend_Controller_Action_Helper)用法详解
2016/03/05 PHP
PHP设计模式之原型设计模式原理与用法分析
2018/04/25 PHP
document.designMode的功能与使用方法介绍
2007/11/22 Javascript
基于jquery的使ListNav兼容中文首字拼音排序的实现代码
2011/07/10 Javascript
用原生JavaScript实现jQuery的$.getJSON的解决方法
2013/05/03 Javascript
ComboBox 和 DateField 在IE下消失的解决方法
2013/08/30 Javascript
nodejs中实现路由功能
2014/12/29 NodeJs
JavaScript中的toDateString()方法使用详解
2015/06/12 Javascript
Javascript的表单验证-提交表单
2016/03/18 Javascript
C#微信小程序服务端获取用户解密信息实例代码
2017/03/10 Javascript
JS使用贪心算法解决找零问题示例
2017/11/27 Javascript
浅谈vue-router 路由传参的方法
2017/12/27 Javascript
微信小程序实现漂亮的弹窗效果
2020/05/26 Javascript
基于VUE的v-charts的曲线显示功能
2019/10/01 Javascript
JS实现基本的网页计算器功能示例
2020/01/16 Javascript
详解JavaScript 中的批处理和缓存
2020/11/19 Javascript
编写v-for循环的技巧汇总
2020/12/01 Javascript
[34:39]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#1COL VS EG第二局
2016/03/05 DOTA
python连接mongodb操作数据示例(mongodb数据库配置类)
2013/12/31 Python
python通过wxPython打开一个音频文件并播放的方法
2015/03/25 Python
实例解析Python设计模式编程之桥接模式的运用
2016/03/02 Python
Python pip替换为阿里源的方法步骤
2019/07/02 Python
Python3爬虫里关于Splash负载均衡配置详解
2020/07/10 Python
浅谈对python中if、elif、else的误解
2020/08/20 Python
解决pytorch 保存模型遇到的问题
2021/03/03 Python
印度服装购物网站:Limeroad
2018/09/26 全球购物
法院反腐倡廉心得体会
2014/09/09 职场文书
共产党员批评与自我批评
2014/10/15 职场文书
党的群众路线教育实践活动制度建设计划方案
2014/10/31 职场文书
单位租房协议书范本
2014/12/04 职场文书
《别在吃苦的年纪选择安逸》读后感3篇
2019/11/30 职场文书
详解在SQLPlus中实现上下键翻查历史命令的功能
2022/03/18 SQL Server