js实现默认或者触发一个事件选中元素内容的方法

方法一:非文本框、文本域的选中内容方法

<!Doctype html>
<html>
  <head>
  <script type="text/javascript" src=‘http://libs.baidu.com/jquery/2.0.0/jquery.js‘></script>
  <body>
    <div  onclick="SelectText(‘myDiv‘)">点击选中</div>
    <div id="myDiv">
      测试选中内容<p>eee</p>
      测试
    </div>
    <script>
    function SelectText(element) {
      var browserName=navigator.userAgent.toLowerCase();
        var text = document.getElementById(element);
        if (/msie/i.test(browserName) && !/opera/.test(browserName)) {
            var range = document.body.createTextRange();
            range.moveToElementText(text);
            range.select();
        } else {
            var selection = window.getSelection();
            var range = document.createRange();
            range.selectNodeContents(text);
            selection.removeAllRanges();
            selection.addRange(range);
            //苹果浏览器下,现已经不支持html的内容
            // var selection = window.getSelection();
            // selection.setBaseAndExtent(text, 0, text, 1);
        }
    }
    </script>
  </body>
</html>

方法二:文本区、文本框选中内容方法(文本域和文本框与其他html标签选中的方法不一样)

<!Doctype html>
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>选中文本</title>
      <style type="text/css">
        body{ font-size:12px;}
      </style>
</head>
<body>
  <input type="text" id="song" value="在解放路松岛枫424" />
</body>
</html>
<script>
/*
1. 只受用于一些含有value属性的HTML控件,例如单行文本框、多行文本域;
2. 后面两个参数表示起始字符位置与结束的字符位置,如果位置值为空,或是非数值,则会(从头或至尾或全部)选择字符;
3. 支持负值,负值表意与js中的slice属性一致,负值表示的含义就是负值与字符总长度的和,也可以理解为从末尾开始选择;
4. 如果数值范围超过字符总长,则无内容选择;
5. 支持单参数,省略第三个参数表示一致到字符结束都要选中。
*/
var textSelect = function(o, a, b){
    //o是当前对象,例如文本域对象
    //a是起始位置,b是终点位置
    var a = parseInt(a, 10), b = parseInt(b, 10);
    var l = o.value.length;
    if(l){
        //如果非数值,则表示从起始位置选择到结束位置
        if(!a){
            a = 0;
        }
        if(!b){
            b = l;
        }
        //如果值超过长度,则就是当前对象值的长度
        if(a > l){
            a = l;
        }
        if(b > l){
            b = l;
        }
        //如果为负值,则与长度值相加
        if(a < 0){
            a = l + a;
        }
        if(b < 0){
            b = l + b;
        }
        if(o.createTextRange){//IE浏览器
            var range = o.createTextRange();
            range.moveStart("character",-l);
            range.moveEnd("character",-l);
            range.moveStart("character", a);
            range.moveEnd("character",b);
            range.select();
        }else{
            o.setSelectionRange(a, b);
            o.focus();
        }
    }
};
document.onclick = function(){
    var textElem = document.getElementById("song");
    textSelect(textElem, 0, 5);
}

</script>

  

时间: 2024-10-03 14:03:34

js实现默认或者触发一个事件选中元素内容的方法的相关文章

解决js中文输入法无法触发onkeyup事件问题(转)

当监听一个input的keyup的事件的时候,英文输入法的情况下可以实时的通过keyup事件检测到文本框value的变化,但是当输入法变成中文后,input的keyup事件就不会被正常触发. oninput是firefox下面可用,而onpropertychange则是ie下可用.两个方法有着一些区别. oninput只能检测到value这个属性的变化,而onpropertychange则可以检测到包含value的所有属性的变化.于是开始改成这个样子.  使用oninput以及onpropert

在事件触发的时候,有时我们需要一些模拟用户行为的操作。例如:当网页加载完毕后 自行点击一个按钮触发一个事件,而不是用户去点击。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

JS异步加载,JQ事件不被执行解决方法

一,在我们实现动态生成HTML代码时会出现,使用JQ方法会不被执行,解决方法,如下:使用jquery的委托事件,将该方法委托到页面已经存在的一个节点上 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&

C#treeView控件单击事件选中节点滞后问题解决方法

问题描述:在treeView的Click事件中,选中的节点SelectedNode并不是您刚才点击的节点,总是上一次选中的节点,节点选中滞后的问题. 解决方案:在treeView的MouseDown事件里面写如下代码: private void treeView1_MouseDown(object sender, MouseEventArgs e) { if ((sender as TreeView) != null) { treeView1.SelectedNode = treeView1.G

封装一个获取module.exports内容的方法

let fs = require('fs') let req = (moduleName) => { //content代表的是文件内容 let content = fs.readFileSync(moduleName, 'utf8') console.log(content + '\n return module.exports') //最后一个参数是函数的内容体 let fn = new Function('exports','module','require','__dirname','_

vue : 在vuex里写一个数组首尾元素互换的方法

不着急上代码,先想几个问题. vuex里怎么写方法? mutation里写vuex方法,组件中用commit调用. 数组首尾元素怎么互换? arr.splice(0, 0, arr[arr.length - 1]) arr.pop() 怎样让这个方法是可复用的? 组件中commit的时候提交想改的数组名字,并在vuex方法中进行检测. 需要检测啥? 1 state中是否存在这个变量 2 这个变量是不是一个符合要求(length > 1)的数组? 怎样检测是否存在这个变量? Object.keys

JQ避免出现多次执行一个事件的解决方案

点击按钮之后会多次执行一个事件的话,就在方法结尾加入如下代码,这样的话事件就可以只执行一次了 //避免出现多次执行事件的问题 event.stopPropagation(); 此外,时间的重复绑定也有可能导致出现此问题,解决方法就是在方法开始的时候(以easyui的window的before方法为例)先清除标签的事件,然后在进行下面的重新绑定事件执行方法,如以下代码: //首先初始化解除时间帮顶防止时间重复绑定重复执行事件内容 $('#btnAdd').unbind('click'); $('#

JavaScript 中 onload 事件如何绑定多个方法

页面加载完毕时会触发 onload 事件.基于内容(HTML)要与行为(JavaScript)分离的编码思想,我们需要将一些对页面的初始化操作写在方法内,并通过window.onload = functionName 调用这些方法.需要调用多个方法时,若使用 window.onload = functionA; window.onload = functionB;,它们之中只有最后一个方法会被实际调用.那么应如何实现调用多个方法呢? 直接在 HTML 中编写: <body onload="

JS 阻止浏览器默认行为和冒泡事件

JS 冒泡事件 首先讲解一下js中preventDefault和stopPropagation两个方法的区别: preventDefault方法的起什么作用呢?我们知道比如<a href="http://www.baidu.com">百度</a>,这是html中最基础的东西,起的作用就是点击百度链接到http://www.baidu.com,这是属于<a>标签的默认行为,而preventDefault方法就是可以阻止它的默认行为的发生而发生其他的事情