JavaScript, чтобы очистить текстовую область после ввода пользователем - PullRequest
Новая
       30

JavaScript, чтобы очистить текстовую область после ввода пользователем

1 голос
/ 27 мая 2020

Я пытаюсь создать форму HTML, которая состоит из заголовка, текстовой области, кнопки публикации и кнопки очистки. Моя цель - очистить текстовую область, если пользователь нажимает кнопку «Очистить», но перед этим появится предупреждение, спрашивающее пользователя, уверен ли он, что хочет очистить текст. Если пользователь вводит OK, текстовая область должна быть удалена, если пользователь вводит «Отмена», метод отменяется.

Я пробовал использовать следующий код, но заметил, что какой бы ввод я ни вводил или нажимал кнопку, текст в текстовой области по умолчанию стирается. Как мне предотвратить это и, следовательно, заставить его работать? 

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

Также есть Jsfiddle , если это помогает

Большое спасибо, ребята

Ответы [ 2 ]

1 голос
/ 27 мая 2020

вам нужно записать оба условия отдельно, и тег формы также действует, чтобы очистить его 

if (txt == "OK" ||txt == "ok")
0 голосов
/ 27 мая 2020

Это должно работать: 

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