单击时，使用jQuery或JS将按钮中的文本添加到“输入”框中

Question

I a code, when i press on a button, with the value="first_name" it ads the value of the button, as tags, to the list with the class="tags".

How can i change the display text on the button so the text on the button to be "Add tag" and when i press the button to add the text "first_name" in the list?

HTML

<input class="btn btn-info attribute-button" name="commit" readonly="readonly" type="button" value="first_name" />
<input class="btn btn-info attribute-button" name="commit" readonly="readonly" type="button" value="second_name" />



<div class="tags" contenteditable="false">
    <input class="newtag" type="text" name="newtag" readonly="readonly" placeholder="Add tags" />
</div>

CSS

.tags {
width: 100%;
height: 60px;
border: 0px solid #fff;
border-radius: 4px;
margin: 0 0 25px;
padding: 19px 0 0 20px;
font-size: 14px;
background-color: #fff;
background-image: none;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
overflow-x: hidden;
}
.tag {
padding: 1px;
background-color: blue;
color: #fff;
border-radius: 3px;
display: inline-block;
}
.newtag {
border: none;
outline: none !important;
}
.tag .remove {
margin-left:5px;
color: #aaa;
cursor:pointer;
font-size:10px;
}

JS

$(document).ready(function(){
$(".tags, .attribute-button").click(function(){
    $(".newtag").focus();
})
$(".newtag").keydown(function(e){
    if(e.which === 13 || e.which === 32 || e.which === 9){
        e.preventDefault();
        $(".newtag").before("<div class='tag'>" + $(this).val() + "<span class='remove'>X</span></div>");
        $(".newtag").val("");

    }
});
$(".attribute-button").click(function () {
    $(".newtag").before("<div class='tag'>" + $(this).val() + "<span class='remove'>X</span></div>");

    $('.remove').on('click', function () {
        $(this).parent().remove();
    });
});
});

Thanks.

Answer 1

You could simply use native HTML button element instead of input type="button" :

<button class="btn btn-info attribute-button" value="first_name">Add tag</button>
<button class="btn btn-info attribute-button" value="second_name">Add another tag</button>

JSfiddle