既是安安

蝴蝶飞不过沧海,谁忍心责怪?

Textarea中选中部分文字的实现

前天在处理公司项目的一个bug的时候突然想到的,是这样的,就是要在当输入的字符超过120个的时候给出提示,却被公司的测试团队打出个bug,就是说当一次性直接 Ctrl + V 进去120+ 个字符还是可以发送,嗯,算是我考虑不周。

偷下懒,在submit的时候再加个判断好了,这下问题就来了。。。

当我还是Ctrl + V 进去120+ 个字符之后单击submit,然后提示“文字超过最大长度”,与此同时应该做什么操作呢?

其实我们大可以将其不处理或者是进行截取长度的操作,于情于理这都是可以的,不过,如果考虑到其他的东西(比如说:用户体验)呢?

我们可以考虑一下,比方说:

场景一:

我复制了一大段文字,当我submit的时候被告知“字符超过最大长度”,OK,这没什么但是我得思考120个字符的长度到底有多长呢?

场景二:

我还是复制了一大段文字,当我submit的时候还是被告知“字符超过最大长度”,OK,这还没什么,可恨的是系统竟然截去了超过的那些字符!(想想,如果这些文字是剪切的,并且剪切板里已经没有了呢?是不是很令人抓狂?)

解决方案也并不是没有,比如说就这两种方案让用户自己抉择。

比如说,我是这么处理的(当然还没有加样式)

当我们单击取消的时候

选中120以后的字符,这样的话,用户就可以直接对选中的文字进行剪切或者删除操作。

这里只有一个难点就是如何将textarea中的文本部分选中?

这个在IE和Firefox中均可实现,只是实现的方法不同。在IE浏览器下使用的是createTextRange而Firefox/chrome等浏览器下使用的是setSelectionRange。

IE的代码如下:

 
  1. var range = textarea.createTextRange();
  2. range.collapse(true);//将插入点移动到当前范围的开始或结尾
  3. range.moveStart('character',parseInt(start) );//start为开始字符的索引
  4. range.moveEnd('character',parseInt(len));//len为需要选中的长度
  5. range.select();//选中

FF的代码就简短多了,如下:

 
  1. textarea.setSelectionRange(parseInt(start), (parseInt(start)+parseInt(len)));

有注释相信都懂得,那么整个代码就是这个样子(你也可以点击这里查看DEMO):

 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>textarea text select</title>
  6. </head>
  7. <body>
  8.     <textarea id="textarea" style="width:500px; height:150px;"></textarea>
  9.     <br />
  10.     <input id="submit" value="submit" type="button" onclick="Textarea();" />
  11.     <script>
  12.     function Textarea(){
  13.         var textarea = document.getElementById("textarea");
  14.         if(textarea.value.length > 120){
  15.             if(confirm("很抱歉,您所输入的文字已经超过120个字符,如果您点击“确定”按钮,系统将自行对内容进行裁剪并且发送,如果点击“取消”按钮,系统将不做任何操作,您可直接剪切选中部分然后分段发送或者是进行其他操作。")){
  16.                 var temp = textarea.value.substr(0,119);
  17.                 textarea.value = temp;
  18.             }else{
  19.                 var len = textarea.value.length - 120;
  20.                 if(textarea.setSelectionRange){
  21.                     textarea.setSelectionRange(parseInt(120), (parseInt(120)+parseInt(len)));
  22.                 }else{
  23.                     var range = textarea.createTextRange();
  24.                     range.collapse(true);
  25.                     range.moveStart('character',parseInt(120) );
  26.                     range.moveEnd('character',parseInt(len));
  27.                     range.select();
  28.                 }
  29.                 textarea.focus();
  30.             }
  31.             return;
  32.         }
  33.         //   Other Code …
  34.     }
  35.     </script>
  36. </body>
  37. </html>

注意:只能用于一些含有value属性的HTML控件,比如文本框、文本域。

[既是安安]博客 季氏安安

本文作者:季氏安安[既是安安]博客采用 BY-NC-SA 协议进行授权. 转载请保留此链接,谢谢。)

原文链接:http://www.jsann.com/post/textarea_text_select.html

网站分类
Tags列表
最近发表
最新留言
友情链接
站点统计

Top