设置一些样式
width: 300px; height: 300px; border: 1px solid royalblue; padding: 20px; border-radius: 5px; resize: none;
resize:none; 去掉右下角的这个可自动伸缩的样子和功能。
然后文字输入多了,默认就成了这样:
因为文本框的宽高固定死了, 还是超出出现了滚动条。
答: 初始化高度通过css设置(如上),自动伸缩的高度值通过js来计算(如下)。
如果js计算的话,就需要事件触发,用change事件?
答:但是change事件体验不好。
为什么?
change事件的现象是,输入框失去焦点的时候才会触发。如果文本框内容超出高度然后用户还在输入的时候,体验就会很不好。而且如果用户一直不点击别的地方让textarea失去焦点,这个事件就永远不会触发,文本框的高度就不变。
比如输入过程中,就成了这样:
然后点击别的地方才会一次性的展开:
所以需要每次输入的时候就触发计算,就得用键盘事件而不是change事件:
键盘事件需要监听的是键每次弹起的时候,即keyup事件(刚才想了想,貌似监听keydown按压事件也不是不可以的)
每次事件触发的时候,需要做什么?
答:就是计算文本框的滚动高度,即内容高度
具体怎么做?
答:键盘每次弹起的时候,获取文本框的内容高度添加给文本框的高度,即可让其实时的跟随内容自适应。
内容高度用什么属性计算?
即:scrollHeight:给定对象的滚动高度,即内容的可视高度。
function textareaH(box){ let obj = $(box); obj.style.height = obj.scrollHeight + 'px'; } $('textarea').on('keyup',function(){ textareaH('textarea'); });
如果一个页面有多个textarea都需要这个怎么办?一个一个的加或者调用封装函数?
不用,可以在计算高度的时候获取多个,并循环计算:
function textareaH(){ let obj = $('textareaClass'), len = obj.length; for (let i = 0; i < len; i++) { // console.log(obj[i]); obj[i].style.height = 'auto'; obj[i].style.height = obj[i].scrollHeight + 'px'; } }
2018-08-22 19:49:56