按下按钮时如何创建不可编辑的类型（如标签）答案

【问题标题】：How to create a non-editable type(like tags) when a button is pressed按下按钮时如何创建不可编辑的类型（如标签）
【发布时间】：2014-10-18 16:02:49
【问题描述】：

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

<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

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

我怎样才能做到这一点？

【问题讨论】：

如果您不希望用户交互，请不要使用<textarea>。使用 <span> 或 <div> 和隐藏输入。
@Pointy 我需要一个文本区域文本字段对我来说太少了。每次我的 js 代码将该输入添加到文本区域时，我如何创建
或？
单个<input type=text> 可以容纳与<textarea> 一样多的文本

标签： javascript jquery html ruby-on-rails ajax

【解决方案1】：

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

Fiddle

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

【讨论】：

你的代码看起来不错，除了一件事，它也将正常输入作为标签。我不希望发生这种情况。你能解决它吗？我可以创建一个删除按钮，但正常输入不应该不是标签
@railsnewbie 是的，你只需要删除以 $(".newtag").keydown(function(e){ 开头的块。这是一个新的小提琴：jsfiddle.net/6xpoeth6/1
抱歉打扰了，但我似乎无法理解你的代码，你能不能再做一点修复，我想要名字标签，无论最后一点，我的意思是用户应该是能够输入“你好，亲爱的名字，你好吗？”但是您的代码适用“名字你好亲爱的，你好吗？”
我不明白这个问题。别担心打扰我，我很无聊。
好吧，正如我在评论中解释的那样。当我点击“名字”时，它只会在文本字段的开头创建另一个不可编辑的 div。我想要的是将名字不可编辑的 div 放在任何地方是的。

【解决方案2】：

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

Make textarea readonly with jquery

你可以通过按钮点击事件来做到这一点

【讨论】：