美文网首页前端杂货铺Web前端之路
div 模拟 textarea 的实现

div 模拟 textarea 的实现

作者: d5d6a4b4d732 | 来源:发表于2017-06-06 22:50 被阅读271次

    这是一个面试题。。

    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 样式,虽然并没有什么卵用。。

    相关文章

      网友评论

      • jazenye:按照作者的方法实现之后的两个问题想请教一下:
        1. input标签无法实现自适应吗?
        2. 使用div的contenteditable属性之后,有没有办法取消有格式的复制粘贴?因为我感觉这样对实现评论框之类的方法似乎不太友好。
        d5d6a4b4d732:@jazenye 我也是小白:smile:
        jazenye:@cwyaml 好的。谢谢大佬的回答!
        d5d6a4b4d732:感谢你的提问。。
        第一个问题,input标签能不能实现自适应?
        答案一定是肯定的,无非是方法复杂一点。。input是单行文本输入,属于行内元素,用css实现高度自适应显然是不行的,宽度的自适应,首先想到的应该是这样写:width:auto;min-width: xx;max-width: xx; 实验证明这样并没有什么卵用。。所以input要实现自适应,就要用到js了。监控keypress事件,根据input 的value值的长度动态改变input 的宽度。
        第二个问题:也就是设置 contenteditable 属性后只能粘贴纯文本。
        这也是我文章中没有提到的,其实contenteditable 属性可以设置这几个值:"events", "caret", "typing", "plaintext-only", "true", and "false"。其中plaintext-only即为只可输入纯文本。。
      • jazenye:精炼 有帮助:+1:

      本文标题: div 模拟 textarea 的实现

      本文链接:https://www.haomeiwen.com/subject/vrinfxtx.html