处理文本部分内容的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 相关文章推荐
用js实现的抽象CSS圆角效果!!
May 03 Javascript
jquery animate 动画效果使用说明
Nov 04 Javascript
JavaScript中使用Object.create()创建对象介绍
Dec 30 Javascript
Javascript基础教程之for循环
Jan 18 Javascript
自定义刻度jQuery进度条及插件
Sep 02 Javascript
js文字横向滚动特效
Nov 11 Javascript
jQuery随手笔记之常用的jQuery操作DOM事件
Nov 29 Javascript
JavaScript文档碎片操作实例分析
Dec 12 Javascript
js调用屏幕宽度的简单方法
Nov 14 Javascript
JavaScript实现简单的双色球(实例讲解)
Jul 31 Javascript
原生JS+Canvas实现五子棋游戏
May 28 Javascript
vue自定义标签和单页面多路由的实现代码
May 03 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-fpm的配置详解
2013/06/03 PHP
Eclipse的PHP插件PHPEclipse安装和使用
2014/07/20 PHP
YII Framework框架教程之安全方案详解
2016/03/14 PHP
使用TextRange获取输入框中光标的位
2006/10/14 Javascript
JavaScript fontsize方法入门实例(按照指定的尺寸来显示字符串)
2014/10/17 Javascript
JavaScript中this详解
2015/09/01 Javascript
深入理解jquery跨域请求方法
2016/05/18 Javascript
在Javascript操作JSON对象,增加 删除 修改的简单实现
2016/06/02 Javascript
JS控制文本域只读或可写属性的方法
2016/06/24 Javascript
JS查找字符串中出现次数最多的字符
2016/09/05 Javascript
JS实现动态增加和删除li标签行的实例代码
2016/10/16 Javascript
JS中showModalDialog关闭子窗口刷新主窗口用法详解
2017/03/25 Javascript
AngularJS实现根据不同条件显示不同控件
2017/04/20 Javascript
在Vue中如何使用Cookie操作实例
2017/07/27 Javascript
详解Vue.js Mixins 混入使用
2017/09/15 Javascript
JavaScript 中的 this 工作原理
2018/06/20 Javascript
关于引入vue.js 文件的知识点总结
2020/01/28 Javascript
JS实现网页烟花动画效果
2020/03/10 Javascript
Javascript实现秒表计时游戏
2020/05/27 Javascript
[03:11]不朽宝藏三外观展示
2020/09/18 DOTA
在Python的setuptools框架下生成egg的教程
2015/04/13 Python
python 基本数据类型占用内存空间大小的实例
2018/06/12 Python
使用PyQt4 设置TextEdit背景的方法
2019/06/14 Python
Python批量安装卸载1000个apk的方法
2020/04/10 Python
详解pandas绘制矩阵散点图(scatter_matrix)的方法
2020/04/23 Python
Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 (附转换公式)
2020/03/18 HTML / CSS
德国、奥地利和瑞士最大的旅行和度假门户网站:HolidayCheck
2019/11/14 全球购物
兰蔻法国官方网站:Lancôme法国
2020/02/22 全球购物
C/C++程序员常见面试题一
2012/12/08 面试题
考核工作实施方案
2014/03/30 职场文书
留守儿童工作方案
2014/06/02 职场文书
银行会计主管岗位职责
2014/10/01 职场文书
详解CSS伪元素的妙用单标签之美
2021/05/25 HTML / CSS
MySql 8.0及对应驱动包匹配的注意点说明
2021/06/23 MySQL
Win11 Dev 预览版25174.1000发布 (附更新修复内容汇总)
2022/08/05 数码科技
vue实现input输入模糊查询的三种方式
2022/08/14 Vue.js