TextArea自动换行

日期:2016-3-2 16:12 | 标签: textarea JS | 阅读:721

今日,同事遇到了textarea需要根据输入来自适应高度的情形,久久未能解决。自适应高度能提升用户输入的体验,比如微信聊天输入框就可以自动换行,而且最多只能换4行,不信?你试试。

我提出的解决办法

textarea实际高度发生改变时,会触发滚动条滚动事件,此时调整textarea可视高度为实际高度。

document.getElementsByName("textareaname")[0].onscroll=function(){
  this.style.height=this.scrollHeight+'px';
}

缺点:虽能够自动换行,需要自动退行何解?

检验不可行的一些方案

  1. 设置overflow-y:visible;
    overflow-y:visible;
    
  2. 使用onpropertychange,这个属性浏览器不兼容
    onpropertychange="this.style.posHeight=this.scrollHeight"
    
  3. onchange事件
    这个只有在鼠标离开时才会有反应,显然不符合要求。

最终解决方案

textarea注册键盘事件,每次松开键盘时检测textarea当前实际高度,并设置可视高度为实际高度。

$.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);
        });
    });
}
$('textarea[autoHeight]').autoHeight();

参考

最终解决方案源码参考自:textarea文本域自适应高度[自动增加高度]-王小刀
不可行方案参考自:http://www.jb51.net/css/18610.html

版权声明: 署名-非商业性使用-禁止演绎 4.0 国际(CC BY-NC-ND 4.0
Copyright ©2013-2017 | 粤ICP备14081691号 | yipeng手工打造 | 联系方式