反应原生文本区域表单 - Javascript

在Web开发中，文本区域表单是很常见的，可以用于用户输入文本、留言、评论区等功能。通过JavaScript，我们可以对文本区域表单进行一些反应，比如自适应高度、限制字符数、输入时实时显示等。本文将介绍反应原生文本区域表单的相关技术。

自适应高度

有些文本区域表单需要根据用户输入的内容自动调整高度，以便用户输入更多的文字。下面是一个示例，可以实现自适应高度。

const textArea = document.querySelector('#myTextarea');
textArea.addEventListener('input', () => {
  textArea.style.height = 'auto';
  textArea.style.height = textArea.scrollHeight + 'px';
});

这段代码可以使文本框自动增高以适应输入的内容。我们监听 input 事件，每次输入后将文本框的高度设为自动，然后再设为滚动高度（即文本框中文本的高度），这样就可以实现自适应高度。

限制字符数

有些应用需要限制用户输入的字符数，比如微博、Twitter等。下面的代码可以限制用户输入的字符数。

const textArea = document.querySelector('#myTextarea');
const maxLength = 140;
textArea.addEventListener('input', () => {
  const textLength = textArea.value.length;
  const remaining = maxLength - textLength;
  const remainingContainer = document.querySelector('#remaining');
  remainingContainer.textContent = remaining;
  if (textLength > maxLength) {
    textArea.value = textArea.value.substring(0, maxLength);
  }
});

这里假设文本框最多输入140个字符。我们监听 input 事件，每次输入后计算输入内容的长度，并计算剩余可输入的字符数。同时，我们将可输入的字符数输出到页面上，以便用户知道还可以输入多少字符。如果超过字数限制，则截取文本框的内容。

输入时实时显示

有些应用需要在用户输入时实时显示输入内容，比如邮件内容、聊天内容等。下面的代码可以实现实时显示输入内容。

const textArea = document.querySelector('#myTextarea');
const previewContainer = document.querySelector('#preview');
textArea.addEventListener('input', () => {
  const previewContent = textArea.value.replace(/\n\r?/g, '<br>');
  previewContainer.innerHTML = previewContent;
});

这里假设有一个div来显示输入的内容，并使用换行符\n和\r作为换行符。我们监听 input 事件，每次输入后将文本框中的换行符替换为HTML换行符
，然后将文本框的内容输出到div中。这样就可以实现实时显示输入内容。

结论

JavaScript可以实现很多反应原生文本区域表单的功能，像自适应高度、限制字符数、输入时实时显示。以上是三个示例，希望可以对您有帮助。