上个月好像没更博客，因为期末考比较忙。毕竟我这种靠着聪明才智活着的人想要在一群勤奋刻苦的人中间生存下来也不容易。

进入正题。今天在写一个文本输入框，我们平时写的能输入文字的标签一般有input和textarea两种。它们各有不同的属性，input只能显示单行文字，而textarea虽然可以显示多行，但是它的高度是不能随着文字的长度变化而自适应的——但是我又想要一个足够炫酷的可以自己适应文字高度的文本框。

原本以为只能通过 js 搞定了，然而刷知乎的时候看到他评论的文本框标签和平时自己看到的很不一样——好了就是他了。

contenteditable 属性

先来介绍一下这个东西，简单来说，就是可以让你的元素内容是否可编辑。

例如下面这一段文字就可以编辑：

这是一个可编辑的段落。

<p contenteditable>这是一个可编辑的段落。</p>

你往里面输入的文字，会被直接写入到网页的 HTML 代码中。因此如果我们要获取里面的内容，就可以用 dom.innerText 来获取。因此当我们打了一段很长的文字时，其实只是相当于在 div 中加了很长的文字而已。

我们可以把input标签的常用样式套用在contenteditable属性的元素里。例如outline样式。

实现 placeholder

单单一个空白的文本框可能不能满足我们的欲望。肯定有人会想如何给这个文本框加上 placeholder。虽然原生不支持 placeholder 属性，但是我们可以可以用一些奇技淫巧来满足这个要求。

我们按照往常的写法把 placeholder 属性写进元素里。

<div contenteditable="true" placeholder="添加你的评论"></div>

然后通过 css 来加上 placeholder

div[contentEditable]:empty:not(:focus):before {
  content: attr(placeholder);
  color: #aaa;
  font-weight: 300;
}

效果大概是这样

实现 maxlength

可能还有一些同学想要顺带实现 maxlength 的效果，嗯… 好好用 js 解决吧 拖出去续了！

VUE 中实现双向数据绑定

嗯用过 vue 的人都会常常用到v-model这个语法糖。然而只能在input、textarea、select标签和自定义组件中直接使用。（理论上来讲应该是带有 value 属性的元素）。因此在这里我们要手写一遍数据绑定。

关于v-model的介绍，参考使用自定义事件的表单输入组件 里面给出的解释是

<input v-model="something" />

等价于

<input v-bind:value="something" v-on:input="something=$event.target.value" />

因此参照上面的写法，我们也可以自己写一组双向数据绑定:

<div contenteditable v-text="content" @input="handleInput"></div>

export default {
  data() {
    return {
      content: '',
    }
  },
  methods: {
    handleInput($event) {
      this.content = $event.target.innerText

      // 下面这段代码可以限制最大长度
      this.content = this.content.substring(0, 100)
    },
  },
}

当然你也可以把它单独做成一个组件来引用，不过我觉得两者效率差不多。

以上就是用 vue 实现一个可以自己改变高度的文本框的全部方法介绍啦。过几天就出成绩了希望期末考好点