清除textarea onclick

时间:2014-07-17 18:45:01

标签: javascript html button textarea clear

我之前已经问过这个问题,但我正在寻找基于我提供的代码的具体答案:

<script type="text/javascript">
function insertText(name, text) { var elem = document.getElementById(name); elem.innerHTML += text; }
</script>

...

<img src="/images/text1.png" onclick="insertText('textbox1', 'Text to be displayed'); insertText('textbox2', 'Text to be displayed');">
<img src="/images/text2.png" onclick="insertText('textbox1', 'Text to be displayed'); insertText('textbox2', 'Text to be displayed');">
<img src="/images/clear.png" onclick="this.form.elements['textbox1'].value = ''; this.form.elements['textbox2'].value = '';">

...

<textarea id="textbox1" name="option1"></textarea>
<textarea id="textbox2" name="option2"></textarea>

它真的没有比这更基本了(是的,我重新发现基本的html内容丢失了,我把它剥离下来以便更好地展示它)

单击事件与函数调用一起正常工作,并将文本追加到textarea。问题是当我点击“清除”图像时,没有任何反应。我看到许多人说这种方法有效的例子,但事实并非如此。单击“清除”按钮时没有任何内容清除。有什么想法吗?

5 个答案:

答案 0 :(得分:3)

尝试

onclick="document.getElementById['textbox1'].value = ''; document.getElementById['textbox2'].value = '';">

ID应该是唯一的,因此ID

不支持搜索元素

答案 1 :(得分:1)

不要使用.value,而是再次使用.innerHTML。我假设this.form.elements['textbox1']与您使用textbox1更改的elem.innerHTML += text;相同。如果你使用

this.form.elements['textbox2'].innerHTML = "";

它会给你想要的结果。

但是,您可能希望切换到value。将所有对.innerHTML的引用切换为.value,它也可以正常工作。

答案 2 :(得分:1)

要更改或更新textareainput文本字段的内容,请不要使用innerHTML属性,而是使用value属性。

答案 3 :(得分:1)

img不是&#34;表单元素&#34;,它没有form属性,即使它放在表单中也没有。

如果img是表单的直接子项,您可以执行以下操作:

<img src=".." onclick="this.parentElement.elements['textbox1'].value = ''; this.parentElement.elements['textbox2'].value = '';" />

A live demo at jsFiddle

如果不是,请改用document.getElementById来引用textareas。

但是,我建议您使用正确的事件处理,例如addEventListener

elem.innerHTML += text;中的insertText()也可能阻止textareas进一步以编程方式进行编辑。使用value代替innerHTML

答案 4 :(得分:0)

我建议使用jQuery:

<script type="text/javascript">
$(document).load(function(){
    $("#insertText1").click(function(){
        $("#textbox1").val("Text to be displayed");
    });
    $("#insertText2").click(function(){
        $("#textbox2").val("Text to be displayed");
    });
    $("#insertTextClear").click(function(){
        $("#textbox1").val("");
        $("#textbox2").val("");
    });
});
</script>
...
<img src="/images/text1.png" id="insertText1">
<img src="/images/text2.png" id="insertText2">
<img src="/images/clear.png" id="insertTextClear">
...
<textarea id="textbox1" name="option1"></textarea>
<textarea id="textbox2" name="option2"></textarea>