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 ...
随机推荐
- 从SDP中至少要看到那些东西?
最近对通过抓包获得了很多的SDP封包,对这些SDP媒体协商过程很是好奇,为什么不同的sip终端所提供的SDP包不尽相同,为什么同一台FS对不同的sip终端发送不同的SDP? 对我菜鸟级别的我们,我分享 ...
- web.xml 部署描述符元素
在每一个Web应用程序路径的WEB-INF/下和conf/下存在一个Web.xml配置文件,用来设定Web应用程序的配置.在Web.xml中的设定非常多,接下来分段来说明它的各项设定:<?xml ...
- 各浏览器下使用 OBJECT 元素和 EMBED 元素嵌入 Flash 存在差异
标准参考 OBJECT 元素定义了一个嵌入的对象.其引入的初衷是取代 IMG 和 APPLET 元素.不过由于安全等各方面原因以及缺乏浏览器支持,这一初衷并未实现.浏览器的对象支持依赖于对象类型.然而 ...
- Android学习笔记————利用JDBC连接服务器数据库
/******************************************************************************************** * auth ...
- Android app 在线更新那点事儿(适配Android6.0、7.0、8.0)
一.前言 app在线更新是一个比较常见需求,新版本发布时,用户进入我们的app,就会弹出更新提示框,第一时间更新新版本app.在线更新分为以下几个步骤: 1, 通过接口获取线上版本号,versionC ...
- PHP 闭包
一.闭包基本用法闭包(Closure)又叫做匿名函数,也就是没有定义名字的函数.比如下面的例子: // 定义一个闭包,并把它赋给变量 $f $f = function () { return 7; } ...
- python易错题之lambda 以及 for循环中内嵌函数
li = [] for x in range(10): print(x) //在函数没有执行前(li[0]()),for 循环中x已经执行完,x会一直为 9 def fun(): print(x) / ...
- javafx实现模态/模式窗口
import javafx.stage.*; import javafx.scene.*; import javafx.scene.paint.Color; import javafx.scene.c ...
- 《剑指offer》-整数中1出现的次数
题目描述 求出1~13的整数中1出现的次数,并算出100~1300的整数中1出现的次数?为此他特别数了一下1~13中包含1的数字有1.10.11.12.13因此共出现6次,但是对于后面问题他就没辙了. ...
- ELK - MAC环境搭建
ELK - MAC环境搭建 本文旨在记录elasticsearch.logstash.kibana在mac下的安装与启动. 写在前面 ELK的官方文档对与它们的使用方法已经讲的非常清楚了,这里只对相关 ...