textarea<一>

如果只需要完成简单的功能。而不愿使用庞大的插件，不妨自己制作简单的在线文本编辑器

首先，制作之前，要明白几个概念

 

1。  获得鼠标选择的值：ie和ff下略有不同

IE：

  var sel = document.selection.createRange(); 
  alert(sel.text );

 

FF：获得光标选择域的起始位置，终止位置，调用 subString(indexNum,endNum) 方法，来获得所选择的文本

      

 

 var element = document.getElementsByTagName(textarea)[0];
 var indexNum = element.selectionStart; //光标开始位置
 var endNum = element.selectionEnd;//光标结束位置
 var selText = element.value.substring(indexNum,endNum);//调用subString方法，获得选择文本的值
    alert('indexNum='+indexNum+"====endNum="+endNum+"===selText="+selText);

   由于document.selection在ff下不支持，所有利用这个属性来判断浏览器，以上ie和ff下的代码进行合并，最后的代码

function getSelText() {
var selText ;
//ie
 if(document.selection!=null){
      var sel = document.selection.createRange(); 
       selText=sel.text;
 }
 //ff
 else{
    var element = document.getElementsByTagName(textarea)[0];
    var indexNum = element.selectionStart; //光标开始位置
    var endNum = element.selectionEnd;//光标结束位置
     selText = element.value.substring(indexNum,endNum);
   
 }
            return selText;
 
      
   }

 2.关于textarea下的文字换行

html文本中，默认回车换行字符为 \n.调用replace方法，将\n替换为html标记 <br/>

 

   /**获得textarea中的内容(代码格式)*/
   function getContext(){
          var element = document.getElementsByTagName(textarea)[0];
          var context=element.value.replace(/(\n)/g,"<br/>");

             return context;
   }

 题外话：

如果用户输入时不使用回车换行，textarea会自动换行，在输入时看起来是换行了的。但是进入后台存储的时候，由于没有换行符<br/>，将输入的内容在从后台提取出来的时候，显示就回出现混乱。这个可以使用css进行控制换行控制

 <div style="white-space: normal;width: 100%;word-break:break-all; overflow:auto;">

这种代码在ie下。超出指定宽度，自动换行，ff下位超出指定宽度后，以滚动条显示

3。关于textarea在宽度在ie和ff下宽度差异问题：

这里不具体讨论，je或网上有很多这样的文章，这里的解决方案是使用 style样式height=?px和width=?px属性进行定义，而不是使用textarea的属性cols,rows

下面是一个初始化textarea样式的方法

   /**
   *定制textarea的样式
   * json字符串style={height：num,width:num}
   *例 ： var style={height:120,width:120}; this.setStyle(style);
   */
   function setStyle(style){
    
               var element = document.getElementsByTagName(textarea)[0];
               element.style.height=style.height;
                element.style.width=style.width;

   }