- 浏览: 38321 次
- 性别:
- 来自: 上海
文章分类
最新评论
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>
添加 "plugins:new InsertAtCursorTextareaPlugin()"到textarea新建的时候
/** * Copyright Intermesh * * This file is part of Group-Office. You should have received a copy of the * Group-Office license along with Group-Office. See the file /LICENSE.TXT * * If you have questions write an e-mail to info@intermesh.nl * * @version $Id: InsertAtCursorTextareaPlugin.js 2353 2009-04-15 11:05:51Z mschering $ * @copyright Copyright Intermesh * @author Merijn Schering <mschering@intermesh.nl> */ Ext.namespace("Ext.ux"); Ext.ux.InsertAtCursorTextareaPlugin = function (){ return { init : function(textarea){ textarea.insertAtCursor = function(v) { if (Ext.isIE) { this.el.focus(); var sel = document.selection.createRange(); sel.text = v; sel.moveEnd('character',v.length); sel.moveStart('character',v.length); }else { var startPos = this.el.dom.selectionStart; var endPos = this.el.dom.selectionEnd; this.el.dom.value = this.el.dom.value.substring(0, startPos) + v + this.el.dom.value.substring(endPos, this.el.dom.value.length); this.el.focus(); this.el.dom.setSelectionRange(endPos+v.length,endPos+v.length); } } } } };
发表评论
-
ext 两种提交方式
2012-05-21 15:49 0Ext.Ajax.request和formPanel.ge ... -
javascript深入理解js闭包
2012-05-07 14:25 759一、变量的作用域 要 ... -
js对象也json字符串相互转换
2012-03-20 11:23 1564doEncode = function(o){ ... -
ext 图片显示
2012-03-19 20:48 1087picture = new Ext.BoxComponent( ... -
js格式化工具
2012-03-19 15:49 706http://www.51240.com/javascript ... -
ext tooltip
2012-03-11 18:04 759http://www.cnblogs.com/lipan/ar ... -
网页宽度
2012-03-08 16:16 628在网页中通过javascript获得当前页面或窗口的各个宽度高 ... -
EXT-GWT中TextField输入位数限制
2012-03-08 12:35 1772extjs中TextField有setMaxLength()和 ... -
ShowModalDialog与window.open的区别
2012-03-08 10:18 1219一、ShowModalDialog函数、 ... -
ExtJS中表单验证使用自定义vtype示例
2012-03-06 16:29 1720在ExtJS中,使用了四种 ... -
Ext常用6大布局方式
2012-02-22 20:41 2160只要是EXT.Container以及其之类都可以都可以使用La ... -
ExtJs之FormPanel篇
2012-02-20 14:14 988表单时是web中常见的元素,Ext中的表单也是特别丰富的,接下 ...
相关推荐
在JavaScript中,处理`<textarea>`元素的选中区域是一项常见的任务,特别是在用户交互和文本编辑器的开发中。在不同的浏览器环境下,实现这一功能的方法有所不同。以下是对标题和描述中涉及的知识点的详细说明: ##...
height:180px">柯乐义 Javascript 在textarea光标处插入文本</textarea> <input type="button" onclick="insertAtCursor(document.getElementById('keleyi_com'),'www.keleyi.com')" value="插入文本" /> </div> ...
<textarea cols="80" rows="20" name="input" onkeydown="editTab()"></textarea> ``` 通过这种方式,textarea现在具有了在用户按下`Tab`键时自动缩进的功能,从而提供了一个更接近代码编辑器的用户体验。这种实现...
在JavaScript中,对文本框(TextArea)进行操作是常见的需求,比如在光标位置插入文字并把光标移动到新插入文字的末尾。这里主要涉及两种浏览器环境下的处理方式:IE和其他现代浏览器(Firefox, Chrome, Safari, ...
在JavaScript中,获取和设置光标位置是常见的需求,特别是在处理用户输入时,例如在`Input`或`TextArea`元素中。以下将详细介绍如何在不同类型的输入元素中实现这一功能,并确保兼容性。 首先,我们需要了解`Input`...
本文实例讲述了JS获取及设置TextArea或input文本框选择文本位置的方法。分享给大家供大家参考。具体实现方法如下: function getPos(el) { var range, textRange, duplicate el.focus() if ( el.selectionStart ...
在网页开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作、事件处理和Ajax交互等任务。本文将深入探讨如何使用jQuery实现在textarea元素中指定位置插入字符或表情的方法。 首先,让我们理解这个...
代码如下: [removed] <!– String.prototype.len=function(){ return this.replace(/[^\x00-\xff]/g,”**”).length;... var controlid = document.selection.createRange().parentElement().id; var control
首先,我们要明白在HTML中,表单元素(如`<input>`或`<textarea>`)允许用户输入文本。当我们谈论光标位置时,实际上是指用户在这些元素中输入时闪烁的光标所在字符的位置。 在JavaScript中,获取光标位置的方法并...
需要注意的是,TextRange对象主要适用于IE浏览器,非IE浏览器(如Firefox、Chrome、Safari等)使用的是不同的API(如`Range`对象和`Selection`对象)来处理文本选择和操作。因此,在跨浏览器的JavaScript开发中,...