Как создать нередактируемый тип (например, теги) при нажатии кнопки

Question

Я получил несколько кнопок, созданных в цикле динамически.

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

И у меня есть текстовое поле.

<textarea class="text optional special form-control" data-role="tagsinput" id="campaign_message" maxlength="180" name="campaign[message]"></textarea>

они созданы моим приложением rails.

и это мой код JS, чтобы добавить значение кнопки в текстовое поле

  $(document).on("click",".attribute-button", function(){

      var value = $('.special').val($('.special').val() + $(this).val());})

что я хочу сделать, это;

когда кнопка нажата, я уже могу написать содержимое текста, но я хочу написать их как нередактируемые тексты. Пользователь не должен иметь возможность изменять добавленный текст.

http://timschlechter.github.io/bootstrap-tagsinput/examples/bootstrap-2.3.2.html

Я нашел эту библиотеку, но она не сработала для меня, так как она не поддерживает текст. Он применяет теги ко всем входам. Но у меня будут теги и входные тексты вместе.

Как я могу достичь этого?

Answer 1

Взгляните на этот вопрос. Все, что вам нужно сделать, это сделать поле доступным только для чтения, если вы не хотите, чтобы люди добавляли текст.

Сделайте текстовую область доступной только для чтения с помощью jquery

Вы можете сделать это с помощью события нажатия кнопки

Answer 2

Вот мое решение. Есть div с классом тегов. Внутри это div с классом тега и текстовое поле с классом newtag. Когда вы вводите текст в newtag и нажимаете пробел, ввод или табуляция, будет вставлен новый тег div. Если вы нажмете кнопку с классом attribute-button, ее значение будет добавлено в тег div. Вам нужно будет добавить что-то, чтобы завершить его, например кнопку удаления на тегах, чтобы удалить его.

скрипка

HTML:

<input class="btn btn-info attribute-button" name="commit" type="button" value="first_name" />
<div class="tags">
    <input type="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 (необязательно):

.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;
}