`

js selection ==>ext textarea

selectiongetselection 
阅读更多

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>

 

 

 

 

EXT 在textarea的光标处插入

 

添加 "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常用6大布局方式
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    js TextArea的选中区域处理

    在JavaScript中，处理`&lt;textarea&gt;`元素的选中区域是一项常见的任务，特别是在用户交互和文本编辑器的开发中。在不同的浏览器环境下，实现这一功能的方法有所不同。以下是对标题和描述中涉及的知识点的详细说明： ##...

    JS在textarea光标处插入文本的小例子

    height:180px"&gt;柯乐义 Javascript 在textarea光标处插入文本&lt;/textarea&gt; &lt;input type="button" onclick="insertAtCursor(document.getElementById('keleyi_com'),'www.keleyi.com')" value="插入文本" /&gt; &lt;/div&gt; ...

    javascript实现textarea中tab键的缩排处理方法

    &lt;textarea cols="80" rows="20" name="input" onkeydown="editTab()"&gt;&lt;/textarea&gt; ``` 通过这种方式，textarea现在具有了在用户按下`Tab`键时自动缩进的功能，从而提供了一个更接近代码编辑器的用户体验。这种实现...

    JS在TextArea光标位置插入文字并实现移动光标到文字末尾

    在JavaScript中，对文本框（TextArea）进行操作是常见的需求，比如在光标位置插入文字并把光标移动到新插入文字的末尾。这里主要涉及两种浏览器环境下的处理方式：IE和其他现代浏览器（Firefox, Chrome, Safari, ...

    JavaScript 获取/设置光标位置,兼容InputTextArea

    在JavaScript中，获取和设置光标位置是常见的需求，特别是在处理用户输入时，例如在`Input`或`TextArea`元素中。以下将详细介绍如何在不同类型的输入元素中实现这一功能，并确保兼容性。 首先，我们需要了解`Input`...

    JS获取及设置TextArea或input文本框选择文本位置的方法

    本文实例讲述了JS获取及设置TextArea或input文本框选择文本位置的方法。分享给大家供大家参考。具体实现方法如下： function getPos(el) { var range, textRange, duplicate el.focus() if ( el.selectionStart ...

    jQuery实现在textarea指定位置插入字符或表情的方法

    在网页开发中，jQuery是一个非常流行的JavaScript库，它极大地简化了DOM操作、事件处理和Ajax交互等任务。本文将深入探讨如何使用jQuery实现在textarea元素中指定位置插入字符或表情的方法。 首先，让我们理解这个...

    限制textbox或textarea输入字符长度的JS代码

    代码如下: [removed] &lt;!– String.prototype.len=function(){ return this.replace(/[^\x00-\xff]/g,”**”).length;... var controlid = document.selection.createRange().parentElement().id; var control

    获取表单中当前光标位置

    首先，我们要明白在HTML中，表单元素（如`&lt;input&gt;`或`&lt;textarea&gt;`）允许用户输入文本。当我们谈论光标位置时，实际上是指用户在这些元素中输入时闪烁的光标所在字符的位置。 在JavaScript中，获取光标位置的方法并...

    JavaScript中textRange对象使用方法小结

    需要注意的是，TextRange对象主要适用于IE浏览器，非IE浏览器（如Firefox、Chrome、Safari等）使用的是不同的API（如`Range`对象和`Selection`对象）来处理文本选择和操作。因此，在跨浏览器的JavaScript开发中，...

Magicbox
Global site tag (gtag.js) - Google Analytics