HTML 输入文本区域 - JavaScript

在 Web 开发中，我们经常需要在页面上提供一个输入文本区域，让用户可以输入大段文字。HTML 提供了 <textarea> 元素，可以轻松实现这个功能。但是，如果你想让这个输入文本区域更加智能、实用，那么你需要使用 JavaScript。

创建输入文本区域

要在 HTML 中创建输入文本区域，只需要在 <form> 元素中使用 <textarea> 元素即可。例如：

<form>
  <label for="message">留言：</label>
  <textarea id="message" name="message"></textarea>
</form>

这样就可以创建一个输入文本区域，用户可以在里面输入留言。

自适应高度

如果输入文本区域的内容很多，会导致滚动条出现，并且用户需要手动滚动才能看到所有内容。这样的体验并不好。因此，我们需要让输入文本区域自适应高度，以展示所有内容。

要实现这个功能，我们可以使用 autosize.js 库。这个库可以让我们轻松实现自适应高度的输入文本区域。

Markdown:

安装 `autosize.js` 库后，只需要初始化输入文本区域即可。例如：

```js
// 导入 autosize.js 库
import autosize from 'autosize';

// 初始化输入文本区域
autosize(document.querySelector('#message'));

这样，输入文本区域的高度就可以自适应内容。

输入实时预览

输入文本区域可能用于很多不同的场景。例如论坛的回帖区域，我们希望能够实时预览用户输入的内容，以便用户可以及时发现并更正错误。

要实现输入实时预览的功能，我们可以使用 marked.js 库。这个库可以将 Markdown 格式的文本转化为 HTML。

Markdown:

安装 `marked.js` 库后，我们可以使用 `input` 事件来监听输入文本区域的变化。例如：

```js
// 导入 marked.js 库
import marked from 'marked';

// 获取输入文本区域元素
const messageEl = document.querySelector('#message');

// 监听输入事件
messageEl.addEventListener('input', () => {
  // 获取输入文本区域的值
  const message = messageEl.value;

  // 将 Markdown 格式的文本转化为 HTML
  const html = marked(message);

  // 将 HTML 显示在预览区域
  document.querySelector('#preview').innerHTML = html;
});

这样，用户在输入文本区域中输入内容时，预览区域就会实时更新。

总结

在 Web 开发中，输入文本区域是一个非常实用的元素。通过 JavaScript，我们可以对输入文本区域进行自适应高度、实时预览等优化，提升用户体验，增加应用的实用性。