`
mutongwu
  • 浏览: 448404 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

选中DIV的DOM节点与文本

 
阅读更多

/**
* @description 模拟鼠标选中页面文本。
* 把el{DOMElement}节点设置为选中状态。
* 如果text不为空,则仅选中el中的text文本。
* @author shawn
*/
function selectDomText(el,text) {
    if(!el)    
        return;
    if(text){
        if(/MSIE ([^;]+)/.test(navigator.userAgent)){
            var range = document.body.createTextRange();
            range.moveToElementText(el);
            var found = range.findText(text);
            if(found){
                range.execCommand('selectAll');
            }
        }else{
            var t = el.firstChild;
            if(t && t.nodeType == 3){
                var range = document.createRange();
                var str = t.nodeValue;
	            range.selectNode(t);
                var idx = str.indexOf(text);
                if(idx != -1){
                    var selObj = window.getSelection();
                    selObj.removeAllRanges();
                    range.setStart(t,idx);
                    range.setEnd(t,idx + text.length);
                    selObj.addRange(range);
                }
            }
        }
    }else{
        if (window.getSelection) {  // all browsers, except IE before version 9
                var selection = window.getSelection ();
                selection.selectAllChildren (el);
        } else {                    // Internet Explorer before version 9
                var range = document.body.createTextRange ();
                range.moveToElementText (el);
                range.select();
        }
    }
}
/**
*获取选中的文本,支持body/input/textarea元素。
*/
function getSelText(){
    var selText = "";
    if (window.getSelection) {  // all browsers, except IE before version 9
        if (document.activeElement && 
                (document.activeElement.tagName.toLowerCase () == "textarea" || 
                 document.activeElement.tagName.toLowerCase () == "input")) 
        {
            var text = document.activeElement.value;
            selText = text.substring (document.activeElement.selectionStart, 
                                      document.activeElement.selectionEnd);
        }
        else {
            var selRange = window.getSelection ();
            selText = selRange.toString ();
        }
    }
    else {
        if (document.selection.createRange) { // Internet Explorer
            var range = document.selection.createRange ();
            selText = range.text;
        }
    }
    return selText;
}

//选择文本框里面的字符
function selectText(textbox, startIndex, stopIndex){
	if (textbox.setSelectionRange){
		textbox.setSelectionRange(startIndex, stopIndex);
	} else if (textbox.createTextRange){
		var range = textbox.createTextRange();
		range.collapse(true);
		range.moveStart(“character”, startIndex);
		range.moveEnd(“character”, stopIndex - startIndex);
		range.select();
	}
	textbox.focus();
}
分享到:
评论

相关推荐

    使用Jsoup库解析HTML、XML或URL链接中的DOM节点

    **Jsoup库解析HTML、XML或URL链接中的DOM节点** Jsoup是一款强大的Java库,它设计用于处理实际世界中的HTML,使得开发者可以方便地提取和操作数据。在Web开发中,有时我们需要从网页中获取特定信息,比如文章内容、...

    JS常见DOM节点操作示例【创建 ,插入,删除,复制,查找】

    总之,理解并熟练掌握DOM节点操作对于任何JavaScript开发者来说都是至关重要的,无论是在简单的页面交互还是复杂的Web应用程序中,这些基本操作都是构建动态用户界面的基础。通过DOM,我们可以实现诸如响应式设计、...

    jQuery获取DOM节点实例分析(2种方式)

    然后通过`$div[0]`和`$div.get(0)`两种方式分别获取了纯粹的DOM节点,并使用JavaScript的`alert()`函数显示了其中的文本内容。可以看到,两种方式都能达到相同的效果。 ### 结语 在进行Web开发时,合理利用jQuery...

    jQury-DOM篇学习笔记

    首先,jQuery提供了简便的方式来创建DOM节点。创建元素节点通常通过HTML字符串描述并传递给`$()`函数,如`$("<div></div>")`创建了一个空的`<div>`元素。如果要同时创建文本节点,可以直接将文本内容包含在HTML字符...

    Js Div属性大全

    3. atomicselection:指定元素及其内容是否可以作为一个不可见单位被选中,通常用于编辑器或富文本组件。 4. begin:设置或获取时间线在该元素上播放前的延迟时间,适用于多媒体元素的同步。 5. blockDirection:...

    js实现编辑div节点名称的方法

    这个示例展示了JavaScript动态操作DOM的强大能力,允许用户在页面上直接编辑文本,提高了用户体验。在实际项目中,这种功能可以应用于笔记、评论编辑等场景,让用户更方便地交互和修改内容。理解并掌握这种技术对于...

    dom笔记1

    在案例分析中,提到了两个列表的移动操作,这可能涉及到DOM节点的移除和插入。例如,可以使用`removeChild`移除一个选项(option)节点,再使用`appendChild`或`insertBefore`将其添加到新的位置。同时,`innerHTML`...

    富文本编辑 代码 嵌入WEB页面的文本编辑框

    例如,当用户选中一段文本并点击加粗按钮时,编辑器会找到选中的文本节点,并添加`<strong>`标签来实现加粗效果。 4. **数据存储与传输**:编辑的内容需要被保存到服务器或者本地存储,通常以HTML格式进行传输。在`...

    准确找到DOM树的元素

    在网页开发中,DOM(Document Object Model)是一个关键的概念,它是一种标准的、与语言无关的接口,用于表示HTML或XML文档的结构,并允许程序和脚本动态地访问和更新文档的内容、结构和样式。本篇文章将围绕"如何...

    jQuery修改DOM结构_动力节点Java学院整理

    DOM节点可以是元素节点、属性节点、文本节点等。 - **jQuery对象**: 通过jQuery函数包装过的DOM元素集合。jQuery对象并不是DOM对象,但它可以使用jQuery定义的方法对DOM元素进行操作。 #### 2. jQuery DOM操作方法 ...

    DivTree实现带复选框的tree(内附效果图)

    - 复选框与节点文本结合,可以通过CSS定位使其看起来一体化。 2. **CSS样式**: - CSS用来设置树的视觉样式,包括节点间的缩进、复选框的位置、展开/折叠箭头等。 - 使用`:checked`伪类来改变选中状态下的样式。...

    JavaScript 第三章 DOM编程基础 使用document对象

    6. `document.createTextNode(text)`: 创建包含文本的新文本节点。 7. `document.appendChild(node)`: 把一个节点添加到父节点的子节点列表末尾。 8. `document.removeChild(node)`: 删除给定的子节点。 9. `...

    ajax + div +js +xml+ servlet 实现无限级动态目录树(原创)

    通过JavaScript操作div的样式和内容,可以实现节点的展开、折叠、选中等交互效果。 3. JavaScript: JavaScript是实现这个动态目录树的关键。它负责处理用户交互,如点击事件,以及与服务器进行AJAX通信。...

    Dtree+Jquery动态生成树节点

    7. **JQuery的辅助功能**:JQuery提供了丰富的DOM操作API,如`.append()`用于添加节点,`.remove()`用于删除节点,`.toggleClass()`用于切换节点的选中状态等,这些都为DTree的动态操作提供了便利。 综上所述,...

    jQuery与JavaScript节点创建方法的对比

    在网页动态交互中,创建和操作DOM节点是常见的任务,jQuery和JavaScript提供了不同的方式来实现这一目标。本文将深入探讨jQuery与JavaScript在创建节点方面的差异。 首先,理解DOM(Document Object Model)是至关...

    JQ 查找节点

    - `$("input[type='text']")` 选择所有文本输入框。 2. **链式操作(Chaining)**: 选中的元素集合可以链式调用jQuery方法,这提高了代码的可读性和效率。例如: ```javascript $("#myDiv").hide().slideUp();...

    第05章 基础 DOM 和 CSS 操作(上)

    首先,DOM是一个树形结构,其中每个节点代表了文档的一个部分,例如元素、属性或文本。通过JavaScript,我们可以使用`document.getElementById`、`document.querySelector`或`document.querySelectorAll`等方法来...

    jquery 常用 Dom操作

    - **功能**:为选中的元素添加一个或多个类名。 - **示例**:`$("p").addClass("highlight");` 2. **设置属性(`attr()`)** - **语法**:`$("selector").attr("attribute", "value");` - **功能**:设置元素的...

    获取div编辑框,textarea,input text的光标位置 兼容IE,FF和Chrome的方法介绍

    3. 通过DOM节点的父节点或者自身来获取与编辑元素相对应的标签名称。 4. 根据标签名称判断光标位置的获取方式。例如,对于textarea和input text,直接使用element.selectionStart获取位置;对于div编辑框,需要...

Global site tag (gtag.js) - Google Analytics