多个文本区域

Question

如何将多个文本区域重置为其默认值（文本）？不给他们具体的 class 有可能吗？我只找到了一个文本输入的解决方案，但在 1 页上的多个文本区域没有成功，由功能重置。

<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>

Answer 1

您需要修改如下js脚本：

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

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

Answer 2

这样的怎么样？

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没有值属性。

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

为了克服这个问题，我们需要某种机制来存储默认值

在你的情况下，如果你有很多元素（文本区域），使用数据属性将帮助我们在页面加载和用户更改值后识别默认值

所以用下面的例子

<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>

多个文本区域

Multiple textareas

javascript

textarea

编辑以匹配评论中的用例