点击后清除文本区域

Question

我知道这个问题以前有人问过，但我想根据我提供的代码得到一个具体的答案。

<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中。 问题是当我点击 "清除 "图片时，什么都没有发生。 我看到很多例子，人们都说这是可行的，但事实并非如此。 当我点击 "清除 "按钮时，没有任何东西被清除。 有什么想法吗？

Answer 1

试试

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

ID应该是唯一的，所以不支持通过ID搜索元素。

Answer 2

img 不是一个 "形式元素"，它没有 form 属性，即使它被放置在一个表格中也不行。

如果 img 是表单的直接子代，你可以做这样的事情。

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

在jsFiddle的现场演示.

如果没有，请使用 document.getElementById 来代替引用textareas。

不过，我建议你使用适当的偶数处理，比如说...。addEventListener.

还 elem.innerHTML += text; 在 insertText() 可能会阻止文本区域的进一步编程编辑。使用 value 而不是 innerHTML.

Answer 3

要改变或更新 textarea 或 input 文本字段，您不需要使用 innerHTML 属性，您可以使用 value 属性。

Answer 4

而不是使用 .value，只需使用 .innerHTML 再次。我假设 this.form.elements['textbox1'] 是一样的 textbox1 与时俱进 elem.innerHTML += text;. 如果您使用

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

它将给你带来理想的结果。

然而，你可能想改用 value. 将所有参考文献切换到 .innerHTML 到 .value 它也会工作。

Answer 5

我建议使用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>