單擊時，使用jQuery或JS將按鈕中的文本添加到“輸入”框中

Question

我是一個代碼，當我按下一個按鈕時，使用值=“first_name”它將按鈕的值作為標記廣告到帶有class =“tags”的列表中。

如何更改按鈕上的顯示文本，使按鈕上的文本為“添加標簽”，當我按下按鈕在列表中添加文本“first_name”時？

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

謝謝。

Answer 1

您可以簡單地使用本機HTML button元素而不是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