专栏首页前端说吧JS - 可自动伸缩高度的文本框

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 条评论
登录 后参与评论

相关文章

  • CSS- ie6,ie7,ie8 兼容性写法,CSS hack写法

    xing.org1^
  • javascript中的内存管理和垃圾回收

      不管什么程序语言,内存生命周期基本是一致的:首先,分配需要的内存;然后,使用分配到的内存;最后,释放其内存。而对于第三个步骤,何时释放内存及释放哪些变量的内...

    xing.org1^
  • css笔记 - 张鑫旭css课程笔记之 border 篇

    double可以利用来配合border-style:solid制作三条杠小icon

    xing.org1^
  • 深度解密setTimeout和setInterval——为setInterval正名!

    重复定时器,JS有一个方法叫做setInterval专门为此而生,但是大家diss他的理由很多,比如跳帧,比如容易内存泄漏,是个没人爱的孩子。而且setTime...

    小美娜娜
  • perspective 属性

    perspective 属性规定了观察者与z=0平面的距离,使具有三维位置变换的元素产生透视效果。z>0的三维元素比正常大,而z<0时则比正常小,大小程度由...

    Html5知典
  • 二叉树的遍历(深度优先+广度优先)

    二叉树的深度优先遍历有三种方式,先序(先根次序)、中序(中根次序)和后序(后根次序)遍历。

    Dabelv
  • 买下LinkedIn有可能是纳德位最大的并购败笔?

    当微软(Microsoft)宣布并购LinkedIn的消息一传出,LinkedIn盘前股价大涨超过48%,同时间微软的股价则是小跌了约3%。资本市场的动态似乎反...

    人称T客
  • P1019 单词接龙

    题目描述 单词接龙是一个与我们经常玩的成语接龙相类似的游戏,现在我们已知一组单词,且给定一个开头的字母,要求出以这个字母开头的最长的“龙”(每个单词都最多在“龙...

    attack
  • Prometheus神器之监控K8s集群

    Prometheus是SoundCloud开源的一款开源软件。它的实现参考了Google内部的监控实现,与源自Google的Kubernetes结合起来非常合适...

    程序员同行者
  • Layui 模板laytpl

    //第一步:编写模版。你可以使用一个script标签存放模板,如: <script id="demo" type="text/html"> <h3>{{ d...

    用户5760343

扫码关注云+社区

领取腾讯云代金券