处理文本部分内容的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 自动完成脚本整理(33个)
Oct 20 Javascript
JavaScript每天定时更换皮肤样式的方法
Jul 01 Javascript
百度地图API之本地搜索与范围搜索
Jul 30 Javascript
基于jQuery实现Div窗口震动特效代码-代码简单
Aug 28 Javascript
4种JavaScript实现简单tab选项卡切换的方法
Jan 06 Javascript
AngularJS中run方法的巧妙运用
Jan 04 Javascript
微信小程序 扎金花简单实例
Feb 21 Javascript
jQuery除指定区域外点击任何地方隐藏DIV功能
Nov 13 jQuery
解决vue数组中对象属性变化页面不渲染问题
Aug 09 Javascript
layui的面包屑或者表单不显示的解决方法
Sep 05 Javascript
vue resource发送请求的几种方式
Sep 30 Javascript
vue实现在v-html的html字符串中绑定事件
Oct 28 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
收音机另类DIY - 纸巾盒做外壳
2021/03/02 无线电
PHP Mysql编程之高级技巧
2008/08/27 PHP
PHP教程 变量定义
2009/10/23 PHP
ThinkPHP中pathinfo的访问模式、路径访问模式及URL重写总结
2014/08/23 PHP
实例讲解php数据访问
2016/05/09 PHP
ThinkPHP实现转换数据库查询结果数据到对应类型的方法
2017/11/16 PHP
Jquery动态更改一张位图的src与Attr的使用
2013/07/31 Javascript
Javascript连接Access数据库完整实例
2015/08/03 Javascript
解析Node.js异常处理中domain模块的使用方法
2016/02/16 Javascript
nodejs使用express创建一个简单web应用
2017/03/31 NodeJs
前端构建工具之gulp的语法教程
2017/06/12 Javascript
浅谈vue引用静态资源需要注意的事项
2018/09/28 Javascript
利用Angular7开发一个Radio组件的全过程
2019/07/11 Javascript
在vue-cli3中使用axios获取本地json操作
2020/07/30 Javascript
[01:07:15]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第二场 1月25日
2021/03/11 DOTA
python去除文件中空格、Tab及回车的方法
2016/04/12 Python
利用python-pypcap抓取带VLAN标签的数据包方法
2019/07/23 Python
python多进程重复加载的解决方式
2019/12/13 Python
pandas实现excel中的数据透视表和Vlookup函数功能代码
2020/02/14 Python
Python切片列表字符串如何实现切换
2020/08/06 Python
HTML5 本地存储实现购物车功能
2017/09/07 HTML / CSS
Html5 webRTC简单实现视频调用的示例代码
2020/09/23 HTML / CSS
日本订房网站,预订日本星级酒店/温泉旅馆:Relux(支持中文)
2020/01/03 全球购物
应届优秀本科大学毕业生自我鉴定
2014/01/21 职场文书
企业总经理职责
2014/02/02 职场文书
优秀士兵先进事迹
2014/02/06 职场文书
党建示范点实施方案
2014/03/12 职场文书
业务员自荐信范文
2014/04/20 职场文书
解除劳动合同协议书(样本)
2014/10/02 职场文书
个人汇报材料范文
2014/12/30 职场文书
六年级语文下册教学计划
2015/01/22 职场文书
出生公证书
2015/01/23 职场文书
小学三年级作文之写景
2019/11/05 职场文书
python 爬取吉首大学网站成绩单
2021/06/02 Python
python用海龟绘图写贪吃蛇游戏
2021/06/18 Python
golang为什么要统一错误处理
2022/04/03 Golang