用户单击按钮时,在输入字段中添加一串文本

时间:2012-12-18 20:35:49

标签: javascript jquery

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

在我们点击按钮之前,表单字段看起来像..(用户输入了一些数据)

[This is some text]
(Button)

单击按钮后,字段看起来像..(我们将after clicking添加到当前值)

[This is some text after clicking]
(Button)

尝试仅使用javascript完成..

4 个答案:

答案 0 :(得分:28)

您可以使用

工作的示例

<强> 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/

答案 1 :(得分:4)

这将只使用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>

答案 2 :(得分:2)

这是: 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')       
});​

答案 3 :(得分:-2)

请不要忘记将输入字段保留在focus上,以便将来使用input.focus();进行输入 在函数内部。

相关问题