Back to Editor

我来展示几种使用JavaScript获取textarea内容的方法

Markdown Document
Reading time about 3 minutes

我来展示几种使用JavaScript获取textarea内容的方法：

  1. 基本方法 - 通过id获取：

javascript

// HTML
<textarea id="myTextarea">初始内容</textarea>

// JavaScript
const textarea = document.getElementById('myTextarea');
const content = textarea.value;
console.log(content); // 输出: "初始内容"
  1. 通过class获取（获取第一个匹配的textarea）：

javascript

// HTML
<textarea class="text-input">初始内容</textarea>

// JavaScript
const textarea = document.querySelector('.text-input');
const content = textarea.value;
console.log(content);
  1. 实时获取（监听输入事件）：

javascript

// HTML
<textarea id="myTextarea"></textarea>

// JavaScript
const textarea = document.getElementById('myTextarea');

textarea.addEventListener('input', function() {
    const content = this.value;
    console.log('当前内容:', content);
});
  1. 完整示例（包含按钮点击获取）：

html

<!DOCTYPE html>
<html>
<head>
    <title>获取Textarea内容</title>
</head>
<body>
    <textarea id="myTextarea" rows="5" cols="30">在这里输入内容</textarea>
    <br>
    <button onclick="getContent()">获取内容</button>
    <p id="output"></p>

    <script>
        // 点击按钮获取
        function getContent() {
            const textarea = document.getElementById('myTextarea');
            const content = textarea.value;
            document.getElementById('output').textContent = content;
        }

        // 实时监听
        const textarea = document.getElementById('myTextarea');
        textarea.addEventListener('input', function() {
            console.log('实时内容:', this.value);
        });
    </script>
</body>
</html>
  1. 处理Markdown输入的示例：

javascript

// HTML
<textarea id="markdownInput"></textarea>
<div id="preview"></div>

// JavaScript
const textarea = document.getElementById('markdownInput');
const preview = document.getElementById('preview');

textarea.addEventListener('input', function() {
    const markdownContent = this.value;

    // 简单提取标题示例
    let title = '默认标题';
    const lines = markdownContent.split('\n');

    for (let line of lines) {
        if (line.startsWith('# ')) {
            title = line.substring(2).trim();
            break;
        } else if (line.startsWith('## ') && !title.startsWith('# ')) {
            title = line.substring(3).trim();
        }
    }

    // 如果没有标题，取前30个字符
    if (!markdownContent.match(/^#{1,2} /m)) {
        title = markdownContent.substring(0, 30);
    }

    preview.textContent = '标题: ' + title;
});

关键点说明：

  1. .value 属性：

    • 这是获取textarea内容的主要方法
    • 返回字符串类型
    • 可以读写（设置新值：textarea.value = '新内容'）

  2. 事件监听选项：

    • input：实时监听任何输入（推荐）
    • change：失去焦点时触发
    • keyup：按键松开时触发

  3. 注意事项：

    • 确保DOM加载完成后再获取元素：
      javascript

      document.addEventListener('DOMContentLoaded', function() {
    const textarea = document.getElementById('myTextarea');
    // ...后续代码
});

    • 处理空值：
      javascript

      const content = textarea.value || '默认值';

  4. 获取并处理多行内容：

javascript

const content = textarea.value;
const lines = content.split('\n'); // 按行分割
lines.forEach(line => {
    console.log(line);
});

这些方法可以根据你的具体需求选择使用。如果你是想结合之前的PHP标题提取功能做前端实时预览，最后一个示例展示了如何在JS中实现类似的标题提取逻辑。

📋 Document Outline