如何使用 Javascript 清除 HTML 上的文本框答案

【问题标题】：How to clear textbox on HTML using Javascript如何使用 Javascript 清除 HTML 上的文本框
【发布时间】：2013-04-12 10:44:11
【问题描述】：

我有这样的html代码

<html>
<script type="text/javascript" src='LatihanKuisJs.js'></script>
    <body>
        <form name="kuis">
            <table border="1" width="50%">
                <tr>
                    <th colspan="2" >Celcius
                </tr>
                <tr>
                        <td align="center" width="80%">Kelvin</td>
                        <td align="center"><input type="text" id="kelvin">
                        </td>
                </tr>
                <tr>
                    <td align="center" width="80%">Reamur</td>
                    <td align="center"><input type="text" id="reamur"></td>
                </tr>
                <tr>
                    <td align="center" width="80%">Fahrenheit</td>
                    <td align="center"><input type="text" id="fahrenheit"></td>
                </tr>
            </table>
            <input type="button" value="Calculate" onclick='calculateCelcius();'/>
            <br/><br/>
            <textarea rows="20" cols="90" id="textarea">
            </textarea>
            <br/><br/>
            <input type="button" value="Clear" onclick='clear();'/>
        </form>
    </body>
</html>

和像这样的外部javascript函数：

function calculateCelcius(){
    var kelvin = document.getElementById('kelvin');
    var reamur = document.getElementById('reamur');
    var fahrenheit = document.getElementById('fahrenheit');
    var textarea = document.getElementById('textarea');

    var hasil=(kelvin.value*1 + reamur.value*1 + fahrenheit.value*1);
    textarea.value += hasil + '\n';
}

function clear(){
    document.getElementById("textarea").value="";
}

当我尝试单击页面上的清除按钮时，文本区域不清晰。怎么了？我该怎么办？

【问题讨论】：

在浏览器控制台返回一些错误？
首先检查浏览器的开发者工具控制台（按 F12 打开开发者工具，如果您使用的是 Firefox，那么您需要先安装 Firebug）并查看是否有正在报告错误。
好的，谢谢，我会试试@AlessandroMinoccheri
我会试试的。谢谢@AnthonyGrist

标签： javascript html button textarea

【解决方案1】：

只需将您的函数从 clear 重命名为 clearTextarea 即可。

clear() 方法指的是过时的document.clear() 方法，在MDN 中描述为：

此方法用于早期清除整个指定文档 (pre-1.0) Mozilla 版本。在基于 Mozilla 的最新版本中应用程序以及在 Internet Explorer 和 Netscape 4 中方法什么都不做。

也照HTML5 specification：

clear() 方法必须什么都不做。

参考资料：

【讨论】：

+1 - 嗯，这是正确的。 clear 那里有保留字吗？我做了这个小提琴：jsfiddle.net/292Ra 这表明它的工作原理很清晰
@TravisJ 我只是想找到任何证据。
将 onclick 更改为 onclick="console.log(clear)" 表明 clear 是 textarea 处理程序 (Chrome 26) 上下文中的本机方法。不知道为什么。
tutorialspoint 参考是 Prototype JavaScript 库的文档。这不是标准 DOM 的一部分。
@searlea 是的，这是已弃用的document.clear() 方法，目前浏览器仍支持该方法。

【解决方案2】：

如果你使用这样的功能

function clearInput(element){
element.value="";
}

然后在输入中添加这个

onfocus="clearInput(this)"

this 可以多次用于任何文本字段或文本区域，因为对象的 id 被传递到它调用函数的位置。

RKillah

【讨论】：

【解决方案3】：

在定义 onclick 事件时，尝试在函数名称前添加 javascript:。
像这样的：

<input type="button" value="Clear" onclick='javascript: clear();'/>

【讨论】：

这是不对的。 javascript: 前缀仅在 href 或 src 属性中需要，从不在事件处理程序中。