How To Create A Non-editable Type(like Tags) When A Button Is Pressed

I got several buttons created in a loop dynamically. And i got a text field. <

Solution 1:

take a look at the awnser of this question. All you have to do is make the field readonly if you do not want people to add text.

Make textarea readonly with jquery

You can do this with a button click event

Solution 2:

Here is my solution. There is a div with the class of tags. Inside it are divs with the class of tag and a text field with the class of newtag. When you enter text into newtag and hit space, enter or tab, a new tag div will be inserted. If you click a button with the class of attribute-button, its value will be added to a tag div. You will need to add thing to complete it such as a delete button on the tags to remove it.

Fiddle

HTML:

<input class="btn btn-info attribute-button" name="commit"type="button" value="first_name" />
<divclass="tags"><inputtype="text"name="newtag"class="newtag"placeholder="Add tags" /></div>

JS:

$(".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'>"+$(".newtag").val()+"</div>");
        $(".newtag").val("");
    }
});
$(".attribute-button").click(function(){
    $(".newtag").before("<div class='tag'>"+$(this).val()+"</div>");
})

CSS (optional):

.tags{
    width: 400px;
    height: 100px;
    border: 1px solid #000;
    margin: 5px;
}
.tag{
    padding: 1px;
    background-color: blue;
    color: #fff;
    border-radius: 3px;
    display: inline-block;
}
.newtag{
    border: none;
    outline: none !important;
}