新浪微博插入话题后部分文字选中的js实现

这篇文章发布于 2010年04月14日,星期三,14:31,归类于 JS实例。 阅读 89597 次, 今日 4 次 19 条评论

 

一、原效果预览

黄历显示今天说话不适宜卖关子,所以直接上图:

新浪微博插入话题后部分文字选中 张鑫旭-鑫空间-鑫生活

点击“话题”这个文字按钮后,在输入框文本域里面就会添加一段文字“#请在这里输入自定义话题#”,其中“请在这里输入自定义话题”处于被选中的状态,这样用户无需再选中文字,直接敲键盘就可以替换这部分内容,这是非常好的一个提高用户体验的细节。

如果您有新浪微博账号,应该对这个功能比较熟悉;如果您尚未注册新浪微博,可以点击这里注册。//zxx:我发现我好像成了新浪的托了,不行,我()要向新浪要广告费……

二、效果的实现

文字的选中功能是不太常用的功能,多出现在文本编辑器中,或是文本域之类的光标处理上。所以呢,使用的一些属性也并不是常见的。在IE浏览器下使用的是createTextRange而Firefox/chrome等现代浏览器下使用的是setSelectionRange。

假设文本域对象的名称是obj,则在IE及非IE浏览器下实现指定文字选中的代码如下:

IE浏览器下:

var range = obj.createTextRange();  
range.moveStart("character", 开始序号);           
range.moveEnd("character", 结束序号);
range.select();
非IE浏览器下:

obj.setSelectionRange(开始序号, 结束序号);
obj.focus();

所以,为了在各个浏览器下都能实现效果,我们需要将上面的两段代码组合一下,结果如下:

if(obj.createTextRange){//IE浏览器
    var range = obj.createTextRange();              
    range.moveEnd("character",结束序号);
    range.moveStart("character", 起始序号);
    range.select();
}else{//非IE浏览器
    obj.setSelectionRange(起始序号, 结束序号);
    obj.focus();
}

三、效果实例

您可以狠狠地点击这里:文本域文字部分选中实现demo

操作如下图标示:

插入话题后部分文字选中demo使用示例 张鑫旭-鑫空间-鑫生活

此demo代码在页面上均有展示,代码的作用仅仅是示例,代码的效率书写等都有待改善,如果您想要封装良好的文字选择代码,请看下面一节。

四、文字内容部分选中的代码封装

关于文字内容的选中可以用一个方法封装起来,以便重用,由于IE不支持DOM leave3,所以Object.prototype不受用于DOM对象,所以这里的方法还是比较传统的,如下代码:

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();
        }
    }
};

例如,执行textSelect(obj, 10 30)就意味着对名为obj的DOM对象值中的第10个到第30个字符进行选中。

您可以狠狠地点击这里:封装良好的文字选中代码测试demo

一些说明:
1. 只受用于一些含有value属性的HTML控件,例如单行文本框、多行文本域;
2. 后面两个参数表示起始字符位置与结束的字符位置,如果位置值为空,或是非数值,则会(从头或至尾或全部)选择字符;
3. 支持负值,负值表意与js中的slice属性一致,负值表示的含义就是负值与字符总长度的和,也可以理解为从末尾开始选择;
4. 如果数值范围超过字符总长,则无内容选择;
5. 支持单参数,省略第三个参数表示一致到字符结束都要选中。

五、结语

小小效果有大大学问,其他我就不多说了,希望能对您的学习有所帮助。

(本篇完)

分享到:


发表评论(目前19 条评论)

  1. 一分钱打赏说道:

    测试一分钱的打赏成功哦。o_o 过年了,没钱了,先打赏一分,等年后发工资在补两个0呗

  2. geemo说道:

    看看这嵌套评论框怎么做的,试试评论

  3. lining说道:

    range.moveStart(“character”,-l);
    range.moveEnd(“character”,-l);
    非常感谢,看后很有收获,想请教下,为什么要有上面这两句呢,只用下面这两句不可以么。是为了重置一下么?
    range.moveStart(“character”, a);
    range.moveEnd(“character”,b);

  4. Moyaiun说道:

    我发现用了jQuery的话setSelectionRange就失效了,我以为jQuery的选择器就是完全替代原生js的呢。请问jQuery里有什么包装好的替代这个的吗?或者只能doc.getId这样?

  5. jj说道:

    咋这么垃圾 三脚猫功夫 半瓶子醋 有你这样喜欢沽名钓誉的人做前端开发 真是中国前端的悲哀!!!!

  6. imxae说道:

    比如说双击时,sina微博会选中话题,而你这不行哦!

  7. jspsj说道:

    找了好久 学习了

  8. wkylin说道:

    若文本域中有“#请在这里输入自定义话题#”这个串,就不要改变文本域的值,如何判断呢??

  9. kailin说道:

    nohelp 说:
    2010年08月12日于16:52

    需要处理类似这样的内容:“@张小明 早上吃的太多@李小明 没有吃饭…”把张小明李晓明换成链接。求教了

    个人想法, @张小明 这个应该是在后台处理的,可以根据这个名字去数据库查到相应的用户ID好,然后再换成连接。

  10. iceweb说道:

    支持,学习了!

  11. nohelp说道:

    需要处理类似这样的内容:“@张小明 早上吃的太多@李小明 没有吃饭…”把张小明李晓明换成链接。求教了

  12. nohelp说道:

    老大可晓得新浪微博中”@xx”是如何实现的,就是发的微博内容中出现“@”以后紧跟其后的文字(有空格之前)都会变成链接。我试着取出“@”和空格之间的字符后再加链接,搞不定js,快疯了

  13. 飞哥说道:

    你的代码在ie7下好像有问题 成了textSelect = function(o, a, b) 表示 从a位置开始选择b个文字了。我把js里面改成这样range.moveEnd(“character”,b-a);才ok。不知道是不是我的环境问题。

  14. popo说道:

    zxx:我发现我好像成了新浪的托了,不行,不要向新浪要广告费……
    这里是不是错了。。。。。

  15. River说道:

    不错