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

Javascript to Jquery, add text in input onclick

本文关键字：onclick 添加 文本 输入 Jquery Javascript      更新时间：2023-09-26

如何将此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/

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

这是一个现场演示。

没有内联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>​

关于步骤的一些注意事项：

  • 已经选择了设置值的输入，这样就不需要一直重新查询：var $tagsInput = $('#text_tag_input');。如果jQuery中的ID选择器替换document.getElementById ，则散列标记选择器

  • 将click事件与.click（）绑定，以获取类为"tags_select"的元素中的链接：`$（'.tags_select a'）.click

  • 要附加值，请在$tagsInput上获取具有[0]的本机DOM元素，并使用属性value的+=表示法，而不是使用jquery方法费力地来获取和设置输入的值。

这是代码：

// 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;
});

演示

进一步阅读：

  • jQuery选择器
  • 将click事件与.click（）绑定
相关文章：