JS - 可自动伸缩高度的文本框

文本框的默认现象:

  • textarea如果设置cols和rows来规定textarea的尺寸,那么textarea的默认宽高是这俩属性设置的值,可以通过鼠标拖拽缩放文本框的尺寸。
  • textarea如果设定了宽高,那么如果文本超出框的高度,会自动出现滚动条。而不会撑开文本框的高度。
  • 如果什么也不设置,最小宽高很窄很细,随便输入内容也会超出文本框隐藏,且自动增加滚动条。

首先先做一些表面工作:

设置一些样式

      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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏GopherCoder

Django:web框架的学习(4:番外篇)

14830
来自专栏Python爱好者

Python绘制分形树(一)

55180
来自专栏从零开始学 Web 前端

从零开始学 Web 之 Vue.js(五)Vue的动画

在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧!

23130
来自专栏HTML5学堂

position:absolute 的深入探讨

今天给大家说说,position:absolute 参考谁进行定位的问题。之前大家可能会认为如果absolute元素的父级(祖父)元素没有设置position属...

30860
来自专栏个人随笔

列表,表格与媒体元素

一.列表   列表就是信息资源的一种展示形式  1.列表及其应用    1)无序列表      无序列表由<ul>标签和<li>标签组成,使用<ul>标签作为无...

393100
来自专栏mukekeheart的iOS之旅

IOS学习——iphone X的适配

  说实话,对于一个刚入门iOS两个月的新手而言,在拿到这个任务的时候整个人都是懵逼的,怎么做适配?哪些地方需要适配?该怎么做?一个个问题搞得头都大了。   首...

36760
来自专栏达摩兵的技术空间

你不知道的height常识

本文将总结一些height中你不知道的常识内容,希望能给你的前端编码带来一些不一样的思想以及更好的理解前端盒模型。

12030
来自专栏web前端教室

html5 - canvas 简介

什么是Canvas? 1、canvas 元素是html5的核心功能之一,使用 JavaScript 在网页上绘制图像。 2、画布是一个矩形区域,您可以控制其每...

24080
来自专栏地方网络工作室的专栏

css3 做一个会动的菜单 menu 按钮动画效果

css3 做一个会动的菜单 menu 按钮动画效果 需要做一个会的动画按钮效果,小前端部知道如何实现,我看了一眼需要的效果,给他写了一个简单的 demo。 设计...

428100
来自专栏Nian糕的私人厨房

WeChat 文章列表页面(一)

本次的系列博文的知识点讲解和代码,主要是来自于 七月老师 的书籍《微信小程序开发:入门与实践》,由个人总结并编写,关于更多微信小程序开发中的各项技能,以及常见问...

13340

扫码关注云+社区

领取腾讯云代金券