Textarea value 属性

在 web 前端开发中，Textarea 是一个常用的表单元素，用于用户输入多行文本。Textarea 元素有一个 value 属性，用于设置或获取文本框中的文本内容。在本文中，我们将详细讨论 Textarea 的 value 属性及其用法。

获取 Textarea 的值

要获取 Textarea 中的值，可以通过 value 属性来实现。以下是一个简单的示例代码：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Textarea Value</title>
</head>
<body>
    <textarea id="myTextarea">Hello, World!</textarea>
    <button onclick="getValue()">Get Value</button>

    <script>
        function getValue() {
            var textarea = document.getElementById('myTextarea');
            var value = textarea.value;
            alert(value);
        }
    </script>
</body>
</html>

在上面的示例代码中，我们创建了一个 Textarea 元素，并设置了一个初始值 "Hello, World!"。当用户点击按钮时，将调用 getValue() 函数来获取 Textarea 的值，并通过 alert() 方法显示在弹窗中。

设置 Textarea 的值

除了获取 Textarea 的值，我们也可以通过 value 属性来设置 Textarea 的值。以下是一个示例代码：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Textarea Value</title>
</head>
<body>
    <textarea id="myTextarea"></textarea>
    <button onclick="setValue()">Set Value</button>

    <script>
        function setValue() {
            var textarea = document.getElementById('myTextarea');
            textarea.value = 'This is a new value';
        }
    </script>
</body>
</html>

在上面的示例代码中，我们创建了一个空的 Textarea 元素。当用户点击按钮时，将调用 setValue() 函数来设置 Textarea 的值为 "This is a new value"。

多行文本输入

Textarea 元素允许用户输入多行文本，可以通过设置 rows 和 cols 属性来定义 Textarea 的大小。以下是一个示例代码：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Textarea Value</title>
</head>
<body>
    <textarea id="myTextarea" rows="4" cols="50"></textarea>
</body>
</html>

在上面的示例代码中，我们创建了一个具有 4 行和 50 列的 Textarea 元素，用户可以在其中输入多行文本。

总结

通过本文的介绍，我们了解了 Textarea 的 value 属性及其用法。无论是获取 Textarea 的值、设置 Textarea 的值，还是定义多行文本输入，都可以通过 value 属性来实现。希望本文对你有所帮助！