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

<!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>

　　

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

  1. 通过JS 给这个input加一个事件 获得焦点，回车事件绑定

    通过JS 给这个input加一个事件 就是获得焦点就行了 window.onload = function(){ var oInput = document.getElementById(" ...

  2. 动态生成的DOM不会触发onclick事件的原因及解决方法

    最近朋友在做一个项目的时候,遇到动态加载微博内容,然后点击“展开评论”后获取该微博的所有评论.这里使用了动态加载的<span mid='123456789′ class='get_comment ...

  3. js autocomplete输入延迟触发执行事件

    需求:延迟查询,autocomplete延迟触发执行事件.当有下一个事件开始时,本次事件中断.目的是为了防止调用服务器过于频繁. var timeout = 0;//延时处理 $("#cus ...

  4. 获得触发hover事件的元素id

    例: <div class="menu"> <ul> <li> <a id="menu1"></a> ...

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

    当监听一个input的keyup的事件的时候,英文输入法的情况下可以实时的通过keyup事件检测到文本框value的变化,但是当输入法变成中文后,input的keyup事件就不会被正常触发. onin ...

  6. [JS] 点击按钮触发后台事件前,弹出确认框

    只需要在button中设置onclick属性触发事件即可 下面以ASP.NET代码为例, ASP.NET中按钮客户端触发js代码的属性是OnClientClick <asp:Button ID= ...

  7. checkbox复选框，如何让其勾选时触发一个事件，取消勾选时不触发

    <input type="checkbox" onclick="checkboxOnclick(this)" /> <script> f ...

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

    一,在我们实现动态生成HTML代码时会出现,使用JQ方法会不被执行,解决方法,如下:使用jquery的委托事件,将该方法委托到页面已经存在的一个节点上 <!DOCTYPE html> &l ...

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

    问题描述:在treeView的Click事件中,选中的节点SelectedNode并不是您刚才点击的节点,总是上一次选中的节点,节点选中滞后的问题. 解决方案:在treeView的MouseDown事 ...

随机推荐

  1. APP缓存数据线程安全问题

    问题 一般一个 iOS APP 做的事就是:请求数据->保存数据->展示数据,一般用 Sqlite 作为持久存储层,保存从网络拉取的数据,下次读取可以直接从 Sqlite DB 读取.我们 ...

  2. Asynchronous and non-Blocking I/O 翻译[收藏好文]

    http://www.tornadoweb.org/en/stable/guide/async.html Real-time web features require a long-lived mos ...

  3. Xcode 各版本简介

    1.Xcode 验证 在终端输入 spctl 命令,并带上安装的 Xcode 的路径 $ spctl --assess --verbose /Applications/Xcode.app 之后会看到类 ...

  4. 页面生命周期里面还有很东西，如PageHandlerFactory等等这些东东也够吃一壶的，发现每走到一个领域，发现要学的东西实在是太多太多啦，总感觉自己所学的东西只是沧海一粟，走过了这道坎，又是一片海洋，我只能呐喊：生命永不止息，学海无涯----够用就好。

    页面生命周期里面还有很东西,如PageHandlerFactory等等这些东东也够吃一壶的,发现每走到一个领域,发现要学的东西实在是太多太多啦,总感觉自己所学的东西只是沧海一粟,走过了这道坎,又是一片 ...

  5. EF GroupBy 根据key 分组 再把key求和(取决于每条数据中 arr的条数) arr 中有多少条数据 就把多少个key 加起来

    List<A> alist = new List<A>{ ,b=,c=,d=,e=}, ,b=,c=,d=,e=}, ,b=,c=,d=,e=}, ,b=,c=,d=,e=}, ...

  6. OpenCV 学习笔记03 findContours函数

    opencv-python   4.0.1 1 函数释义 词义:发现轮廓! 从二进制图像中查找轮廓(Finds contours in a binary image):轮廓是形状分析和物体检测和识别的 ...

  7. 巧用linux服务器的/dev/shm/

    巧用linux服务器的/dev/shm/,如果合理使用,可以避开磁盘IO不给力,提高网站访问速度. 首先让我们认识一下,什么是tmpfs和/dev/shm/? tmpfs是Linux/Unix系统上的 ...

  8. windows7 sqlserver2012 无法写入受保护的内存 解决办法

    1.我服务器  是windows server 2008R2  装的是MSSQLSERVER2012 2.客户端开发是MSSQLSERVER2012 Windows7 遇到问题: 解决办法: 卸载迅雷 ...

  9. VB的一些项目中常用的通用方法-一般用于验证类

    1.VB的一些项目中常用的通用方法: ' 设置校验键盘输入值,数字 Public Function kyd(key As Integer) As Integer Dim mychar mychar = ...

  10. java类中serialversionuid 作用 是什么?举个例子说明(转)

    serialVersionUID适用于Java的序列化机制.简单来说,Java的序列化机制是通过判断类的serialVersionUID来验证版本一致性的.在进行反序列化时,JVM会把传来的字节流中的 ...