`
mutongwu
  • 浏览: 438816 次
  • 性别: 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();
}
分享到:
评论

相关推荐

    基本DOM节点操作

    1、获取元素节点 getElementById():获取指定唯一id的元素。 getElementByTagName():获取指定元素标签名的元素数组。 getElementByName():获取具有指定属性name的元素数组。 2、子节点 element.childNodes:返回该...

    利用vue.js插入dom节点的方法

    本文主要介绍的是vue.js插入dom节点的方法,下面话不多说,来看看详细的介绍吧。 html代码: <div id=app></div> js代码: var MyComponent = Vue.extend({ template: '<div>Hello World</div>' }) var ...

    react.js 获取真实的DOM节点实例(必看)

    为了获取真实的dom节点,文本输入框必须有一个 ref 属性,然后 this.refs.[refName] 就会返回这个真实的 DOM 节点。 var MyComponent = React.createClass({ handleClick: function() { this.refs.myTextInput....

    jQuery移动和复制dom节点实用DOM操作案例

    在做一个项目时,需要dom节点移动,如以下代码: 代码如下:<div></div> <p></p>需要把p标签移动到div标签里,经过测试发现,在jQuery中移动dom节点非常方便: 代码如下:$(‘div’).append($(‘p’))这样即可把p标签...

    纯JS控制DIV选择范围移动与复制(改进版)

    <br>释放后虚线消失,需要添加选择可重复第“3”,“4”步操作,多次选择的节点选中。 <br>快捷键选择,Ctrl +A全选,Ctrl +X反选,Ctrl +Z取消选择。 <br>移动位置,选中DIV后,如果单选组选中移动(-)...

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

    本文实例讲述了jQuery获取DOM节点。分享给大家供大家参考,具体如下: jQuery中包裹后的DOM对象实际上是一个数组,要获得纯粹的DOM对象可以有两种方式: 1、使用数组索引方式访问,例如: 复制代码 代码如下:var dom...

    dom-move:将子节点从一个 DOM 节点移动到另一个节点

    dom-move 将子元素从 DOM 节点移动到另一个 dom 节点。用法 move ( source , destination ) ; source所有子节点都将被删除,并附加到destination 。 返回destination节点,因此您可以执行以下操作: var content = ...

    用jQuery向div中添加Html文本内容的简单实现

    下面小编就为大家带来一篇用jQuery向div中添加Html文本内容的简单实现。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

    div的选中效果

    div添加选中效果,及移动,改变大小鼠标形状变化

    纯JS控制DIV选择范围移动与复制 改进版

    <br>释放后虚线消失,需要添加选择可重复第“3”,“4”步操作,多次选择的节点选中。 <br>快捷键选择,Ctrl +A全选,Ctrl +X反选,Ctrl +Z取消选择。 <br>移动位置,选中DIV后,如果单选组选中移动(-)...

    jQuery获取节点和子节点文本的方法

    这个会得到“test text techbrood co.”,也就是会把当前元素的所有节点(包含子节点)的文本读取出来。 如果只想获取主节点的文本,方法复杂点: var text = $(#text_test).contents().filter(function() {

    JavaScript HTML DOM元素 节点操作汇总

    节点类型:元素 1 ,属性 2 ,文本 3 ,注释 8,文档 9。 一、添加和删除节点(HTML 元素) 1、创建节点 1)创建该元素(元素节点); 2)向一个已存在的元素追加该元素。 语法:appendChild(newnode) eg: <div id...

    点击div部分区域选中整个元素

    点击div部分区域选中整个元素

    dom-binding-stream:绑定到 DOM 节点,并在其中发出任何输入文本区域选择的更改

    绑定到 DOM 节点,并在其中发出任何输入/文本区域/选择的更改。 该模块需要一个带有<textarea> 、 <input>或<select>标签的 DOM 节点作为其内部某处的子节点(可以根据需要在树中深入)。 然后,...

    交换两个div的位置

    点击事件触发,交换两个div的位置,呃。。其实方法很简单的

    DIV+JS画图,DIV与DIV之间的连线!

    实现DIV与DIV之间的连线,工程流程图那样.使用DIV+JS! 我封装了一个基于vml/svg画线条的跨浏览器的函数 用法: var g = new FlowGraphic(); var arrow = g.drawArrow(5,26,200,300,"red"); var arrow = g.drawArrow...

    精简div文本编辑器

    一个非常好用而且简单的DIV文本编辑器!

    vue如何判断dom的class

    <div class=chose-ck v-for=(item,index2) key=index2 ref=chosebox> <p>{{item.name}} <dt v-for=(item2,index) in item.childsCurGoods :key=item2.id :class=index==iac[index2]?'check':'' :id=item2.id :...

    xnode:DOM 节点的可扩展版本

    节点DOM 节点的可扩展版本背景在传统的 UI 编程中,我们习惯于使用面向对象的编程来扩展组件。 例如,我们可以创建一个窗口组件,然后将其扩展为具有多个按钮和图标的对话框组件,然后将其扩展为显示带有 OK 按钮的...

    jQuery DOM节点的遍历方法小结

    本文介绍了jQuery DOM节点的遍历方法小结,分享给大家,也给自己留个笔记 children()方法 jQuery是一个合集对象,如果想快速查找合集里面的第一级子元素,此时可以用children()方法。这里需要注意:.children...

Global site tag (gtag.js) - Google Analytics