多个文本区域

Question

多个文本区域

3

我该如何重置多个文本区域的默认值？是否可以不为它们指定特定的类？我只找到了一个解决方案适用于一个文本输入框，但对于同一页上的多个文本区域没有成功，需要通过函数进行重置。

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

- Oříšek

将它们放在一个<form>中，然后调用form.reset()...(或者使用<input type="reset" />让它为您完成)。 - Niet the Dark Absol

不幸的是，我需要继续使用文本区域 :( - Oříšek

2个回答

0

您需要像下面这样修改js脚本：

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

或者您可以使用HTML占位符并使文本区域的值为空。

- Aritrik

谢谢您的回答，但我需要将文本区域重置为默认文本= Hello world＆Hello second world。而不是将自定义值放入所有文本区域... - Oříšek

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Bastiyan · Accepted Answer

这个怎么样？

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 的默认值是在一些值之间的任何值。因此，当用户更改它时，我们没有办法找到原始值。

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

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

因此，请使用以下示例：

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