JavaScript 在用户输入后清除文本区域
我正在尝试创建一个HTML表单，其中包含标题，文本区域，发布按钮和清除按钮。我的目标是在用户单击“清除”按钮时清除文本区域，但在此之前会出现一个警报，询问用户是否确定要清除文本。如果用户类型确定，则擦除文本区域，如果用户键入 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>
非常感谢大家
尚方宝剑之说2回答
-
达令说
你需要分别写这两个条件和表单标签也是效果来清除它if (txt == "OK" ||txt == "ok") -
撒科打诨
这应该有效：<!DOCTYPE html><html> <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> <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>
随时随地看视频慕课网APP
相关分类
JavaScript