JavaScript 在用户输入后清除文本区域答案

【问题标题】：JavaScript to clear text area after user inputJavaScript 在用户输入后清除文本区域
【发布时间】：2020-09-13 20:29:40
【问题描述】：

我正在尝试创建一个由标题、文本区域、发布按钮和清除按钮组成的 HTML 表单。我的目标是在用户单击“清除”按钮时清除文本区域，但在此之前会出现一个警告，询问用户是否确定要清除文本。如果用户键入 OK，则要擦除的文本区域，如果用户键入 Cancel，则要取消的方法。

我尝试了以下代码，但我注意到无论我输入什么输入或按下按钮，默认情况下都会删除文本区域中的文本。我如何防止这种情况并使其发挥作用？

  <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>

    <link rel="stylesheet" href="global.css">


</head>

<body>


<form >

    <input type="text" id="title" name="title">

<textarea id="blog_textarea" name="blog" placeholder="Your Text">

  </textarea>
   <br><button type="submit" id="post" name="submission" value="Submit">Post</button>
  <button id="clear_button" onclick="clearFun()" >Clear</button>
</form>


<p id="demo"></p>
<script>


    function clearFun() {
        var par_output="";

  var txt = prompt("To confirm, please type OK, or to stay type Cancel ");
  if (txt == "OK" || "ok") {
     document.getElementById("blog_textarea").value = "";
  } else {
    par_output = "Please type OK to confirm or Cancel";
  }
 document.getElementById("par_output").innerHTML = demo;
}
    </script>

</body>
</html>

如果有帮助，也可以there is Jsfiddle

非常感谢大家

【问题讨论】：

if (txt == "OK" || txt == "ok") {（您需要完整地陈述每个条件，或者 JS 将 "ok" 评估为 true，这使得表达式为 true，而不管 txt 的值如何）
谢谢，我编辑了它，但是，无论我在提示中输入什么，文本区域都会被清除
这可能是因为单击<form> 内的按钮将提交表单，这将有效地重新加载页面（从而“清除”文本区域）。见这里：stackoverflow.com/questions/8664486/…

标签： javascript html function textarea prompt

【解决方案1】：

你需要单独写两个条件，表单标签也可以清除它

if (txt == "OK" ||txt == "ok")

【讨论】：

【解决方案2】：

这应该可行：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <textarea id="textarea"></textarea>
    <br />
    <button id="clearbutton">Clear</button>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
      $('#clearbutton').click(async () => {
        const clear = await prompt('Clear? Type ok');

        if (clear.toLowerCase() === 'ok') {
          $('#textarea').val('');
        }
      });
    </script>
  </body>
</html>

在纯 JavaScript 中：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <textarea id="textarea"></textarea>
    <br />
    <button id="clearbutton">Clear</button>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
      document
        .getElementById('clearbutton')
        .addEventListener('click', async () => {
          const clear = await prompt('Clear? Type ok');

          if (clear.toLowerCase() === 'ok') {
            document.getElementById('textarea').value = '';
          }
        });
    </script>
  </body>
</html>

【讨论】：

我在 jQuery 中检查过，它似乎可以工作，你有没有机会在纯 javascript 中显示相同的代码，因为这是我使用的，但在 jQuery 中仍然不好
好的，我给你加了！