前端杂货铺Web前端之路

div 模拟 textarea 的实现

2017-06-06  本文已影响271人  d5d6a4b4d732

这是一个面试题。。

textarea 是一个表单元素,用于多行文字的输入。

在web应用上常见的是: 评论输入框,微博输入框等。

就像下面这样:

作为多行文本域功能来讲,textarea 已经能够满足我们大部分的需求。然而,textarea 有一个不足就是 高度不能跟随内容自适应。这样我们就要考虑应用场景,将其预先设置为合适大小。

这时我们想到 div 元素的尺寸是由其子元素决定的,那么 div 能不能拿来替代 textarea 呢?

1、首先我们得让 div 变得像 input 那样,点击后可以输入信息。

HTML5 中有一个属性 contenteditable 可以决定内容是否可编辑。

<div id="box" class="text_box" contenteditable="true"></div>

这样,点击这个 div 后就会在其内部出现一个光标,想输入什么就输入什么。。

2、高度自适应

#box{
    width: 400px;
    min-height: 100px;
    max-height: 300px;
    height: auto;
    outline: none;
    border: 1px solid #f00;
    overflow-y: auto;
  }

最主要的是把 height 值设置为自适应,其高度就会随内容变化,另外max-height、overflow-y设置当内容超出最大高度后出现滚动条。

其实就是这么简单,我们就实现了。。。

前方高能!!

contenteditable 属性有一个牛逼的地方(自己看):

粘贴带 html 样式,虽然并没有什么卵用。。

上一篇下一篇

猜你喜欢

热点阅读