多个文本区域答案

【问题标题】：Multiple textareas多个文本区域
【发布时间】：2020-11-03 06:44:21
【问题描述】：

如何将多个文本区域重置为其默认值（文本）？是否可以不给他们特定的课程？我发现只有一个文本输入的解决方案，但在一页上的多个文本区域没有成功，由功能重置。

<html>  
<body>
<textarea rows="1" cols="30">Hello World</textarea><br/>
<textarea rows="1" cols="30">Hello Second World</textarea><br/>

<button onclick="reset()">Reset</button>

<script>

            function reset() {
                document.querySelectorAll('textarea').value = <!--Default Value-->
                            }
                           
</script>

</body>
</html>

【问题讨论】：

将它们放入<form> 并调用form.reset()...（或使用<input type="reset" /> 为您完成）
不幸的是我需要留在 textareas :(

标签： javascript textarea

【解决方案1】：

这样的事情怎么样？

Address:<br>
<textarea id="myTextarea">
342 Alvin Road
Ducksburg</textarea>

<textarea id="myTextarea2">
Value 2</textarea>

<p>Click the button to change the contents of the text area.</p>

<button type="button" onclick="myFunction()">Try it</button>

<script>
function myFunction() {
  document.getElementById("myTextarea").value = "Txt1";
  document.getElementById("myTextarea2").value = "Txt2";
}
</script>

编辑以匹配注释中的用例

根据MDN，textarea 没有 value 属性。

当页面加载时，textarea 的默认值是介于某个值之间的任何值。因此，当用户更改它时，我们无法找到原始值。

为了克服我们需要某种机制来存储默认值

如果您有很多元素（Textareas），使用数据属性将帮助我们在页面加载和用户更改值后识别默认值

所以使用下面的例子

<textarea rows="1" cols="30" data-default="Default Val">Hello World</textarea><br/>
<textarea rows="1" cols="30" data-default="Default Val1">Hello World</textarea><br/>
<textarea rows="1" cols="30" data-default="Default Val2">Hello World</textarea><br/>

<button onclick="reset()">Reset</button>

<script>

            function reset() {
                
                var textareas = document.querySelectorAll('textarea');
                    for(i =0; i < textareas.length; ++i){
                        textareas[i].value = textareas[i].getAttribute('data-default');
                    }   
                }
                           
</script>

【讨论】：

感谢您的回复。这适用于很少的文本区域，但不幸的是我在页面中有几十个，这个脚本会不必要地扩展。我只需要选择页面中的所有文本区域并将它们的值设置为默认值...
谢谢你的回答，它工作正常:) 有没有办法避免手动为每个文本区域编写 data-default 属性？像 JS 一样在页面开始时将 data-default 设置为某些 textarea 的当前值？
你可以按相反的顺序来想同样的过程。试一试，告诉我们进展如何
使用 textareas[i].setAttribute("data-default", textareas[i].value); :)

【解决方案2】：

你需要修改js脚本如下：

    function reset() {
        document.querySelectorAll('textarea').forEach((elem) => elem.value = "Desiered value");
    }

或者您可以使用 HTML 占位符并将 textarea 值设为空。

【讨论】：

感谢您的回答，但我需要将 textarea 重置为默认文本 = Hello world & Hello second world。不要为所有文本区域添加自定义值...