当用户单击按钮时，将文本字符串添加到输入字段中答案

【问题标题】：Add a string of text into an input field when user clicks a button当用户单击按钮时，将文本字符串添加到输入字段中
【发布时间】：2012-12-18 20:35:49
【问题描述】：

基本上只是尝试将文本添加到已经包含值的输入字段..触发器是一个按钮..

在我们点击按钮之前，表单域看起来像..（用户输入了一些数据）

[This is some text]
(Button)

点击按钮后，字段看起来像..（我们将after clicking添加到当前值）

[This is some text after clicking]
(Button)

尝试仅使用 javascript 来完成..

【问题讨论】：

请附上您尝试过的代码。
詹姆斯，我尝试了几种不同的方法，但我没有得到任何结果：/

标签： javascript jquery

【解决方案1】：

工作示例

HTML：

<input type="text" value="This is some text" id="text" style="width: 150px;" />
<br />
<input type="button" value="Click Me" id="button" />

jQuery：

<script type="text/javascript">
$(function () {
    $('#button').on('click', function () {
        var text = $('#text');
        text.val(text.val() + ' after clicking');    
    });
});
<script>

Javascript

<script type="text/javascript">
document.getElementById("button").addEventListener('click', function () {
    var text = document.getElementById('text');
    text.value += ' after clicking';
});
</script>

工作 jQuery 示例：http://jsfiddle.net/geMtZ/

【讨论】：

这看起来是最好的解决方案..我只是不明白为什么它不能在我的最后工作..让我发疯
是的.. 它工作得很好.. 但是当我把它放在我的末端时，无论出于何种原因（即使以各种方式调整它）都没有发生......我不明白。去看看其他建议是否对我有用..
@ZwithaZ 这听起来像是一个愚蠢的时刻，但您是否也在您的页面中包含了 jQuery？
这个页面上已经有一堆了.. 我想弄清楚我做错了什么或者是什么影响了这段代码。
@ZwithaZ 听起来您没有使用 jQuery，如果是这样，您只需要使用纯 javascript 示例即可。我已经更新了我的答案以包含一个纯 JavaScript 示例。试一试，记住不要包含 jQuery 代码。告诉我们进展如何！

【解决方案2】：

这将只使用 javascript 来完成 - 您也可以将函数放在 .js 文件中并使用 onclick 调用它

//button
<div onclick="
   document.forms['name_of_the_form']['name_of_the_input'].value += 'text you want to add to it'"
>button</div>

【讨论】：

【解决方案3】：

这里是： http://jsfiddle.net/tQyvp/

如果你不喜欢 jsfiddle，这里是代码：

html

<input id="myinputfield" value="This is some text" type="button">

Javascript：

$('body').on('click', '#myinputfield', function(){
    var textField = $('#myinputfield');
    textField.val(textField.val()+' after clicking')       
});

【讨论】：