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>
js实现默认或者触发一个事件选中元素内容的方法的更多相关文章
- 通过JS 给这个input加一个事件 获得焦点,回车事件绑定
通过JS 给这个input加一个事件 就是获得焦点就行了 window.onload = function(){ var oInput = document.getElementById(" ...
- 动态生成的DOM不会触发onclick事件的原因及解决方法
最近朋友在做一个项目的时候,遇到动态加载微博内容,然后点击“展开评论”后获取该微博的所有评论.这里使用了动态加载的<span mid='123456789′ class='get_comment ...
- js autocomplete输入延迟触发执行事件
需求:延迟查询,autocomplete延迟触发执行事件.当有下一个事件开始时,本次事件中断.目的是为了防止调用服务器过于频繁. var timeout = 0;//延时处理 $("#cus ...
- 获得触发hover事件的元素id
例: <div class="menu"> <ul> <li> <a id="menu1"></a> ...
- 解决js中文输入法无法触发onkeyup事件问题(转)
当监听一个input的keyup的事件的时候,英文输入法的情况下可以实时的通过keyup事件检测到文本框value的变化,但是当输入法变成中文后,input的keyup事件就不会被正常触发. onin ...
- [JS] 点击按钮触发后台事件前,弹出确认框
只需要在button中设置onclick属性触发事件即可 下面以ASP.NET代码为例, ASP.NET中按钮客户端触发js代码的属性是OnClientClick <asp:Button ID= ...
- checkbox复选框,如何让其勾选时触发一个事件,取消勾选时不触发
<input type="checkbox" onclick="checkboxOnclick(this)" /> <script> f ...
- JS异步加载,JQ事件不被执行解决方法
一,在我们实现动态生成HTML代码时会出现,使用JQ方法会不被执行,解决方法,如下:使用jquery的委托事件,将该方法委托到页面已经存在的一个节点上 <!DOCTYPE html> &l ...
- C#treeView控件单击事件选中节点滞后问题解决方法
问题描述:在treeView的Click事件中,选中的节点SelectedNode并不是您刚才点击的节点,总是上一次选中的节点,节点选中滞后的问题. 解决方案:在treeView的MouseDown事 ...
随机推荐
- linux shell 脚本攻略学习11--mkdir和touch命令详解
一.创建目录(mkdir命令详解) amosli@amosli-pc:~/learn$ mkdir dir amosli@amosli-pc:~/learn/dir$ mkdir folder amo ...
- Instagram/IGListKit 实践谈(UICollectionView框架)
简单介绍 IGListKit是Instagram推出的新的UICollectionView框架,使用数据驱动,旨在创造一个更快更灵活的列表控件. github地址:https://github.com ...
- HDU 3032 Nim or not Nim? (sg函数)
Nim or not Nim? Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)T ...
- 【Oracle】使用dbms_job包创建Oracle定时任务
在Oracle的包里面,有一个名字叫做DBMS_JOB的包,它的作用是安排和管理作业队列.通过作业队列,可以让Oracle数据库定期执行特定的任务.当使用DBMS_JOB管理作业的时候, ...
- VM页面中遍历枚举类
1)自定义的枚举类如下所示: public enum BusType { MID_SMALL(1, "中小件"), FRESH(2, "生鲜"), GLOBAL ...
- redis常用性能分析命令
一.连接 src/redis-cli -h 10.20.137.141 -p 6379 >auth 123456789 src/redis-cli -h 10.20.137.141 -p 637 ...
- 基于Amoba实现mysql主从读写分离
一.Amoeba简介 Amoeba是一个以MySQL为底层数据存储,并对应用提供MySQL协议接口的proxy.它集中地响应应用的请求,依据用户事先设置的规则,将SQL请求发送到特 ...
- Oracle 12C -- 基于sequence的列的默认值
12C支持先创建一个sequence,然后再将该sequence指定为某个列的值的默认表达式. 和"identity column"具有以下不同点: ·对列的个数没有限制 ·seq ...
- Asp.net(C#)常用正则表达式封装
using System; using System.Collections; using System.Text.RegularExpressions; namespace MSCL { //// ...
- linux环境下matlab连接mysql
因为matlab是基于java的,但是原生的matlab是没有jdbc的,这是一个java的mysql connection. 只有matlab有这个包,才能正确的连接mysql. 1.在http:/ ...