Javascript 如何在按下按钮时创建不可编辑的类型（如标记）

我在一个循环中动态创建了几个按钮

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

我想做的就是这样

当按下按钮时，我已经可以在文本上写入内容，但我想要的是将它们作为不可编辑的文本写入。用户应该不能修改添加的文本

我找到了这个库，但它不适合我，因为它不支持文本。他将标记应用于所有输入。但我将标记和输入文本放在一起

---

我怎样才能做到这一点呢？

看看这个问题的答案。如果您不想让人们添加文本，则只需将字段设置为只读即可

---

您可以通过按钮单击事件来实现这一点，这是我的解决方案。有一个带有标记类的div。在它里面是带有tag类的div和带有newtag类的文本字段。在newtag中输入文本并点击空格、enter或tab时，将插入一个新的tag div。如果您单击属性按钮类的按钮，其值将添加到标记div。您需要添加一些东西来完成它，例如标记上的删除按钮来删除它

HTML:

---

如果不想与用户交互，就不要使用。使用a或a和隐藏的输入。@Pointy我需要一个文本区域textfield对我来说太小了。我如何创建或每次我的js代码将该输入添加到文本区域？一个单独的文本可以容纳与您的代码看起来一样多的文本，除了一件事，它也会将正常输入作为标记。我不希望发生这种情况。你能修复它吗？我可以创建一个删除按钮，但正常输入不应该被删除tags@railsnewbie是的，您只需删除以$.newtag.keydown函数开头的块{。这里是一个新的提琴：很抱歉打扰了，但我似乎不明白你的代码，你能不能再做一点修改，我想要名字标签，不管最后一点在哪里，我的意思是用户应该能够输入hello亲爱的名字，你好吗？但是你的代码应用了名字hello亲爱的，你好吗？我不明白问题不要担心打扰我，我很无聊。正如我在评论中所解释的。当我点击名字时，它只是在文本字段的开头创建另一个不可编辑的div。我想要的是把一个不可编辑的div放在原来的位置。

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

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

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

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

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

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