如何在 HTML 表单中“预填充”文本区域的值？ [复制]

Posted 2023-05-07

【中文标题】如何在 HTML 表单中“预填充”文本区域的值？ [复制]

【英文标题】：How can I "pre-fill" the value of a textarea in an HTML form? [duplicate]

【发布时间】：2011-01-14 23:21:21

【问题描述】：

我正在创建一个简单的后端应用程序，用户可以通过它创建/更新/删除数据库行（在本例中为工作列表）。

当用户需要编辑现有列表时，我会尝试使用该现有行中的数据预填充大部分 html 表单。我已经使用“value”属性成功完成了文本输入，并在每个选项标签中使用了一些 php 进行选择：if([conditionforoption])echo'selected'。

我在预填充时遇到问题的输入类型是 textarea...关于当用户加载页面时如何让现有数据（长 varchar 字符串）出现在 textarea 输入中的任何想法？

如果可能的话，我会尽量远离 javascript 解决方案，但如有必要，我会使用它。

【参考方案1】：

<textarea>This is where you put the text.</textarea>

【参考方案2】：

如果您的问题是，如何填写文本区域：

<textarea>
Here is the data you want to show in your textarea
</textarea>

【参考方案3】：

这是一个 HTML5 标记，仅适用于现代浏览器 :)

<textarea placeholder="Add a comment..."></textarea>

【讨论】：

这在 IE9 中无效，因此可能还不是最佳选择

与input value= 的行为也不同，因为占位符从不提交并在输入时消失。

这很好用，但它不是预填充选项。

占位符与默认值不同

【参考方案4】：

要填写文本区域的值，您可以在标签内插入文本，如下所示：

<textarea>Example of content</textarea>

在代码中，“内容示例”文本将成为文本区域的值。如果要添加到值，即获取一个值并添加另一个字符串或数据类型，您可以在 JavaScript 中执行此操作：

<textarea id="test">Example of</textarea>
<!--I want to say "content" in the textarea's value, so ultimately it will say 
Example of content. Pressing the "Add String To Value" button again will add another "content" string onto the value.-->
<input type="button" value="Add String To Value" onclick="add()"/>
<!--The above will call the function that'll add a string to the textarea's value-->
<script>
function add() 
//We first get the current value of the textarea
var x = document.getElementById("test").value;
//Then we concatenate the string "content" onto it
document.getElementById("test").value = x+" content";

</script>

希望能给你一个答案和一个想法！