如何在按下按钮时创建不可编辑的类型(如标签)

How to create a non-editable type(like tags) when a button is pressed

本文关键字：编辑 类型 标签 创建 按钮      更新时间：2023-09-26

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

<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

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

我怎样才能做到这一点?

看看这个问题的答案。如果您不希望人们添加文本，您所要做的就是将该字段设置为只读。

使用jquery设置textarea为只读

你可以通过按钮点击事件

这是我的解决方案。有一个带有标签类的div。它的内部是带有tag类的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;
}
相关文章：