Javascript到Jquery，在输入中添加文本onclick答案

【问题标题】：Javascript to Jquery, add text in input onclickJavascript到Jquery，在输入中添加文本onclick
【发布时间】：2012-03-16 04:11:57
【问题描述】：

如何将此 javascript 代码更改为 JQuery。

<script type="text/javascript">
   function addTextTag(text){
    document.getElementById('text_tag_input').value += text;
   }        
</script>

当用户单击链接时，文本会自动添加到输入中。

这是 HTML：

<input id="text_tag_input" type="text" name="tags" />

<div class="tags_select">
    <a href="#" onClick="addTextTag('text1, '); return false">text1</a>
    <a href="#" onClick="addTextTag('text2, '); return false">text2</a>
    <a href="#" onClick="addTextTag('text3, '); return false">text3</a>
</div>

这里是演示：http://jsfiddle.net/Smartik/j8qGT/

【问题讨论】：

标签： javascript jquery

【解决方案1】：

<script type="text/javascript">
    $(function() {
        $('.tags_select a').click(function() {
            var value = $(this).text();
            var input = $('#text_tag_input');
            input.val(input.val() + value + ', ');
            return false;
        });
    });
</script>

和你的标记：

<input id="text_tag_input" type="text" name="tags" />

<div class="tags_select">
    <a href="#">text1</a>
    <a href="#">text2</a>
    <a href="#">text3</a>
</div>

这是live demo。

【讨论】：

替换文本输入中的文本，而不是追加新文本。使用.text() 而不是.html() 也是一个好主意，以防锚内有额外的 HTML 标签。

【解决方案2】：

没有内联javascript，完全是jQuery： http://jsfiddle.net/j8qGT/3/

JavaScript：

$('a').click(function(){
    $('#text_tag_input').val($('#text_tag_input').val()+$(this).html()+', ');
});

HTML：

<input id="text_tag_input" type="text" name="tags" />

<div class="tags_select">
    <a href="#">text1</a>
    <a href="#">text2</a>
    <a href="#">text3</a>
</div>

【讨论】：

谢谢。这正是我所期待的。

【解决方案3】：

关于步骤的一些说明：

已经选择了设置值的输入，这样您就不必一直重新查询它：var $tagsInput = $('#text_tag_input');。哈希标签选择器如果是 jQuery 中的 ID 选择器，则替换 document.getElementById
使用 .click() 为具有类“tags_select”的元素内的链接绑定点击事件：`$('.tags_select a').click(...);``
李> 1234563 += 属性的表示法value。

代码如下：

// select already you input element for re-use
var $tagsInput = $('#text_tag_input');

// bind a click event to links within ".tags-select" element
$('.tags_select a').click(function() {
    // append link text to the input field value
    $tagsInput[0].value += $(this).text();
    return false;
});

DEMO

进一步阅读：

【讨论】：