日前在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"})
});