js selection对象使用方法

IE：document.selection 　　FireFox：window.getSelection() 　　document.selection只有IE支持，window.getSelection()也只有FireFox和   Safari支持，都不是标准语法。
selection   对象

--------------------------------------------------------------------------------

代表了当前激活选中区，即高亮文本块，和/或文档中用户可执行某些操作的其它元素。
selection   对象的典型用途是作为用户的输入，以便识别正在对文档的哪一部分正在处理，或者作为某一操作的结果输出给用户。

用户和脚本都可以创建选中区。用户创建选中区的办法是拖曳文档的一部分。脚本创建选中区的办法是在文本区域或类似对象上调用   select   方法。要获取当前选中区，请对   document   对象应用   selection   关键字。要对选中区执行操作，请先用   createRange   方法从选中区创建一个文本区域对象。

一个文档同一时间只能有一个选中区。选中区的类型决定了其中为空或者包含文本和/或元素块。尽管空的选中区不包含任何内容，你仍然可以用它作为文档中的位置标志。

一个简单的例子

<html><head><title>document.selection.createRange例子</title></head><body>
<div>请选中这里的部分文字。</div><div><input type="button" value="加粗" onclick="javascript :Bold();" /></div>
<script language="javascript">
function Bold(){
var bo = document.selection.createRange();
bo.execCommand("Bold");
}</script>
</body>
</html>

document.selection.createRange() 根据当前文字选择返回 TextRange 对象，或根据控件选择返回 ControlRange 对象。
配合 execCommand，在 HTML 编辑器中很有用，比如：文字加粗、斜体、复制、粘贴、创建超链接等。
实例一：
<textarea cols=50 rows=15>
哈哈。我们都是新生来得。大家都来相互帮助呀。这样我们才能进步，我们才能赚大钱！</textarea>
<input type=button value=选择字后点击我看看 onclick=alert(document.selection.createRange().text)>
</form>
实例二：
<body>
<textarea name="textfield" cols="50" rows="6">就是现在文本域里有一段文字，当你选种其中几个字后点击一个按钮或者链接会弹出一个对话框，对话框的信息就是你选中的文字
哪位老大能解决的呀?请多多帮忙!!!谢谢
</textarea>
<input type="button" value="showSelection" onclick="alert(document.selection.createRange().text)">
<input type="button" value="showclear" onclick="alert(document.selection.clear().text)">
<input type="button" value="showtype" onclick="alert(document.selection.type)">
<textarea name="textfield" cols="50" rows="6" onselect="alert(document.selection.createRange().text)">就是现在文本域里有一段文字，当你选种其中几个字后点击一个按钮或者链接会弹出一个对话框，对话框的信息就是你选中的文字
哪位老大能解决的呀?请多多帮忙!!!谢谢
</textarea>
</body>
实例三：选中Input中的文本
<SCRIPT LANGUAGE="JavaScript">
<!--
function test2()
{
var t=document.getElementById("test")
var o=t.createTextRange()
alert(o.text)
o.moveStart("character",2)
alert(o.text)
o.select()
}
//-->
</SCRIPT>
<input type='text' id='test' name='test'><input type=button onclick='test2()' value='test' name='test3'>
对textarea中的内容，进行选中后，加效果
<script language="JavaScript">
<!--
function bold(){
Qr=document.selection.createRange().text;
if(!Qr || document.selection.createRange().parentElement().name!='description')
{
txt=prompt('Text to be made BOLD.','');
if(txt!=null && txt!='') document.form1.description.value+=''+txt+'';
}
else{
document.selection.createRange().text=''+document.selection.createRange().text+'';
document.selection.empty();
}
}
//-->
</script>
<input type="button" value="加粗" onclick="bold();" />
<textarea name="description" style="width: 436px; height: 296px">选中我，点击加粗</textarea>
实例四：javascript捕获到选中的网页中的纯文本内容
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>鼠标取词</title>
<script>
function getSel()
{
var t=window.getSelection?window.getSelection():(document.getSelection?document.getSelection():(document.selection?document.selection.createRange().text:""))
document.forms[0].selectedtext.value = t;
}
</script></head>
<body onmouseup="getSel()">
<form>
<textarea name="selectedtext" rows="5" cols="50"></textarea>
</form>
以上的代码可以捕获到选中的网页中的纯文本内容(不含HTML标签)
如果想获得包含html的内容，将document.selection.createRange().text改成document.selection.createRange().htmlText
</body>
</html>

js selection对象使用方法的更多相关文章

JS：对象调方法1
找调用者 1.如果有this,就先看this在哪个函数中,就是离this最近的function,没有就是window 2.找到函数后,辨别哪个是调用者例1: 点击查看代码 function fn() ...
关于js的对象创建方法（简单工厂模式，构造函数模式，原型模式，混合模式，动态模式）
// 1.工厂方式创建对象:面向对象中的封装函数(内置对象) 简单来说就是封装后的代码,简单的工厂模式是很好理解的,关于它的作用,就是利用面向对象的方法,把一些对象封装,使一些占用空间多的,重复的代码 ...
2 —— js语法 —— 对象和方法的声明。变量提升。闭包
一,声明对象 var obj1 = {}; var obj2 = {name:'kk',age:18,fun:function{ // name,age,fun为对象的属性,只是属性 ...
JS打印对象的方法&将Object转换为String的函数
1.有时候需要把对象中的字段属性打印出来,下面用JS实现输出对象: function writeObj(obj) { var description = ""; for (var ...
js Math 对象的方法
Math对象与JavaScript其他对象不同,因为用户不能生成所使用对象的副本,相反脚本汇集了简单Math对象的属性和方法.Math对象实际上存在于每个窗口和框架中,但是对脚本没有影响,程序员把这种 ...
Js构造对象-添加方法的三种方式
Js构造函数添加方法有多种方案,来看一个混合方式构造函数的例子:申明person构造函数,有两个属性,name,qq.在原型上添加方法showname.这是最常用的方法. <script> ...
js遍历对象的方法
1. for ... in 语句 for (let variable in object) { ... } https://developer.mozilla.org/zh-CN/docs/Web/ ...
JS数组对象的方法
concat 返回一个新数组,这个数组是由两个或更多数组组合而成的 array.concat(b,c); join 返回字符串值,其中包括了连接到一起的数组的所有元素,元素由指定分隔符分割开来 arr ...
JS 打印对象的方法
2 3 4 5 6 7 8 function writeObj(obj){ var description = ""; for(var i in obj){ var p ...

随机推荐

centos7 部署 docker ce
=============================================== 2019/4/9_第1次修改 ccb_warlock === ...
bzoj1208splay模板题
想试下新找的板子,没想到交上去CE了..懒得调..以后有机会就改 /* 用type标记当前树上的是宠物还是人每次求前驱后缀,删掉最近的那个点 */ #include<iostream> ...
pytest十一：函数传参和 firture 传参数 request
为了提高代码的复用性,我们在写用例的时候,会用到函数,然后不同的用例去调用这个函数.比如登录操作,大部分的用例都会先登录,那就需要把登录单独抽出来写个函数,其它用例全部的调用这个登录函数就行.但是登录 ...
python 全栈开发，Day67(Django简介)
昨日内容回顾 1. socket创建服务器 2. http协议: 请求协议请求首行请求方式 url?a=1&b=2 协议请求头 key:value 请求体 a=1&b=2(只有p ...
Ubuntu 16.4 安装anaconda 详细教程
下载官方下载地址:https://www.continuum.io/downloads 所有安装包地址:https://repo.continuum.io/archive/ 这里使用 Python ...
.NetCore 下开发独立的（RPL）含有界面的组件包（一）准备工作
.NetCore 下开发独立的(RPL)含有界面的组件包 (一)准备工作 .NetCore 下开发独立的(RPL)含有界面的组件包 (二)扩展中间件及服务 .NetCore 下开发独立的(RPL)含 ...
浅谈Spring MVC知识
关于MVC框架,我相信大家都不陌生,都会说也就是模型-视图-控制器这三层的框架结构,如果你参加面试的时候考官会问:“MVC框架是什么?你说一说.”其实我们都知道这个问题还需要问的,只要你是一个开发人员 ...
Mybatis中的like模糊查询四种方式
1. 参数中直接加入%% param.setUsername("%CD%"); param.setPassword("%11%"); <select i ...
gulp初探
很多人都在用grunt和gulp,我现在连github都不用..为了说自己是个前端,还是搞搞gulp吧 nodejs很多人都会安装,这个不是问题 npm模块现在好像是自带的..我忘了.. 先全局安装下 ...
KNN分类算法及python代码实现
KNN分类算法(先验数据中就有类别之分,未知的数据会被归类为之前类别中的某一类!) 1.KNN介绍 K最近邻(k-Nearest Neighbor,KNN)分类算法是最简单的机器学习算法. 机器学习, ...

js selection对象使用方法

js selection对象使用方法的更多相关文章

随机推荐

热门专题