C语言 c++ php mysql nginx linux lnmp lamp lanmp memcache redis 面试 笔记 ppt 设计模式 问题 远程连接

文字选中的js实现

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

原文地址:http://www.zhangxinxu.com/wordpress/?p=755

posted on 2013-10-21 21:48  思齐_  阅读(10864)  评论(0编辑  收藏  举报