关于textarea的相关实践

日前在web移动端书写一个高宽自适应的文本输入框，并且具有跟随手指移动而移动。

问题：宽度自适应实现不了。

上代码：

<textarea class="u_editArea" placeholder=""  autoHeight="true" cols="19"></textarea>

相关css为:

display: block;
max-width:12rem;
max-height: 12.5rem;
text-align: left;
background-color: inherit;
font-size: 0.85rem;
line-height: 1.2;
padding: 0.5rem;
border: 1px solid #48be93;
overflow:hidden;
outline: none;
font-weight: normal;
word-wrap: break-word; 
word-break: break-all;

文本框的宽度限死为最多10个汉字 20个英文；

高度自适应的做法为：

$.fn.autoHeight = function(){
function autoHeight(elem){
elem.style.height = 'auto';
elem.scrollTop = 0; //防抖动
elem.style.height = elem.scrollHeight + 'px';
}
this.each(function(){
autoHeight(this);
$(this).on('keyup', function(){
autoHeight(this);
});
});
}
$('.u_editArea[autoHeight]').autoHeight();

在键盘事件中也是如此调用；达到最大框就终止；

前端获取文本框中的文字内容返回给后端，所取的文字自动换行时，需要给相应位置加上换行符；此时前端的JS做法为：

定义2个函数：

//计算中英文字符长度
function fucCheckLength(strTemp) { 
 var i,sum;
 sum=0;
 for(i=0;i<strTemp.length;i++) { 
   if ((strTemp.charCodeAt(i)>=0) && (strTemp.charCodeAt(i)<=255)) {
     sum=sum+1;
   }else {
     sum=sum+2;
   }
 }
 return sum; 
}
//返回等于20个字符的下标
function xiabiao(str){
var length=fucCheckLength(str);
// var beishu=parseInt(length/20,10);
if(length>20){
 var i,sum;
 sum=0;
 for(i=0;i<str.length;i++) { 
   if ((str.charCodeAt(i)>=0) && (str.charCodeAt(i)<=255)) {
     sum=sum+1;
     if(sum==20){
      return i;
     }
   }else {
     sum=sum+2;
     if(sum==20){
      return i;
     }
   }
 }
}else{
return 0;
}
}

然后在提交数据时，获取到textarea中的值之后，做相应的处理；处理步骤为：

1、先判断是否有手动的换行

var editext=$(".u_editArea").val();
var indexOF=editext.indexOf("\n");

2、若存在，对值进行切割处理：

var newText=editext.split("\n");

然后遍历每个值：

for(var k=0;k<newText.length;k++){
var u_index=xiabiao(newText[k]);   //返回这个数据到达20个字符的元素下标
if(u_index==0){//若该截字符串没有达到20个字符，则直接加
if(k==0){
text+=newText[k];//K==0代表是第一行，则前面无需换行符
}else{
text+="\r\n"+newText[k];
}
}else{
var length=fucCheckLength(newText[k]);  //首先获取这截字符串的总字符数
var beishu=parseInt(length/20,10);//得到20的倍数
var begin=0;
var first=u_index;
var newPage=begin+first;
for(var p=0;p<beishu;p++){
var text00=newText[k].substring(begin,newPage+1); //截取字符串
text+=text00+"\r\n";//添加至文本
var text01=newText[k].substring(newPage+1,newText[k].length);
var second= xiabiao(text01);
if(second==0){
text=text+text01+"\r\n";
}else{
begin=newPage+1;
newPage=second+newPage+1;
}
}
}
}

关于移动跟随事件，原理是，在touchstart时，记录这个文本框的left top的位置，和手指的x y的位置；

然后在touchmove时，计算touchmove相对于touchstart时的位移差，然后文本域的位置加上这个差就是要移动的距离。

//移动字体框
var _x0='',_y0='',cssTop='',cssLeft='';
$(".m-editText").on("touchstart",function(e){
_x0=e.touches[0].clientX;
_y0=e.touches[0].clientY;
cssTop=$(".m-editText").css("top");
cssLeft=$(".m-editText").css("left");
});
$(".m-editText").on("touchmove",function(e){
e.preventDefault();
var abs=document.documentElement.clientWidth;
var _x1=e.touches[0].clientX;
var _y1=e.touches[0].clientY;
var xx=parseFloat((_x1-_x0)/20).toFixed(2);
var yy=parseFloat((_y1-_y0)/20).toFixed(2);
var dd=parseFloat(cssTop)+parseFloat(yy);
var cc=parseFloat(cssLeft)+parseFloat(xx);
$(".m-editText").css({"top":dd+"rem","left":cc+"rem"})
});