如何使用 javascript 在 html 中使用按钮清除文本区域？

Posted 2023-05-07

【中文标题】如何使用 javascript 在 html 中使用按钮清除文本区域？

【英文标题】：How to clear text area with a button in html using javascript?

【发布时间】：2013-04-04 20:04:14

【问题描述】：

我在 html 中有按钮

<input type="button" value="Clear"> 
<textarea id='output' rows=20 cols=90></textarea>

如果我有一个外部 javascript (.js) 函数，我应该写什么？

【问题讨论】：

也可以像一般的$('textarea').val('')。

【参考方案1】：

通过在按钮单击上添加功能来更改您的 html

 <input type="button" value="Clear" onclick="javascript:eraseText();"> 
    <textarea id='output' rows=20 cols=90></textarea>

在你的 js 文件中试试这个：

function eraseText() 
    document.getElementById("output").value = "";

【讨论】：

迄今为止最优雅、最简单的。

【参考方案2】：

您需要附加一个click 事件处理程序并从该处理程序中清除文本区域的内容。

HTML

<input type="button" value="Clear" id="clear"> 
<textarea id='output' rows=20 cols=90></textarea>

JS

var input = document.querySelector('#clear');
var textarea = document.querySelector('#output');

input.addEventListener('click', function () 
    textarea.value = '';
, false);

这是working demo。

【讨论】：

IE 9之前的addEventListener不存在，这个要注意。

确实如此，因此在 IE8 及以下版本中使用 attachEvent('click', function () );。对于 IE7 及更低版本，也可以使用 getElementById 而不是 querySelector。干杯！

【参考方案3】：

使用 jQuery 库，您可以：

<input type="button" value="Clear" onclick="javascript: functionName();" >

你只需要设置onclick事件，在这个onclick事件上调用你想要的函数。

function functionName()

    $("#output").val("");

上面的函数会将文本区域的值设置为空字符串。

【讨论】：

如果您使用问题未提及的库，您应该告诉您使用的是哪个库。对于onclick，不需要javascript: 前缀，因为很明显它是javascript。无论如何，如果您推荐像 jquery 这样的库，您可能还应该展示如何使用该库添加事件侦听器，而不是将它们混合到 html 代码中。

【参考方案4】：

你的 HTML

<input type="button" value="Clear" onclick="clearContent()"> 
<textarea id='output' rows=20 cols=90></textarea>

你的 Javascript

function clearContent()

    document.getElementById("output").value='';

【参考方案5】：

您可以简单地使用表单的 ID 属性并将<textarea> 标记附加到表单，如下所示：

<form name="commentform" action="#" method="post" target="_blank" id="1321">
    <textarea name="forcom" cols="40" rows="5" form="1321" maxlength="188">
        Enter your comment here...
    </textarea>
    <input type="submit" value="OK">
    <input type="reset" value="Clear">
</form>