如何创建一个不可编辑的类型（如标签），当按钮是pressed [英] How to create a non-editable type(like tags) when a button is pressed

问题描述

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

I got several buttons created in a loop dynamically.

<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应用程序创建的。

these are created by my rails application.

这是我的js code添加按钮的值到文本字段

and this is my js code to add the value of the button into the text field

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

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

我想要做的就是这一点;

what i want to do is this;

当pressed一个按钮，我已经可以写上的文字内容是什么，但我想要的是把它们写为不可编辑的texts.User不应该能够修改添加的文本。

when a button is pressed i can already write the content on the text are but what i want is to write them as non-editable texts.User shouldn't be able to modify the added text.

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

我发现这个LIB，但它没有工作对我来说，因为它不支持文本are.He应用标签的所有inputs.But我将带有标签和输入的文本在一起。

i found this lib but it didn't work out for me since it doesn't support a text are.He apply tags to all inputs.But i will have tags and input texts together.

我怎样才能做到这一点？

how can i achieve this?

推荐答案

下面是我的解决办法。没有与类的标签股利。它里面是的div class标签，并与类newtag的文本字段。当你输入文本newtag并按下空格，回车或制表符，一个新的标签的div将被插入。如果你点击一个按钮之类的属性按钮，它的价值将被添加到一个标签DIV。您将需要添加的东西把它完成，如标签上的一个删除按钮将其删除。

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.

小提琴

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>

记者：

$(".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（可选）：

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

这篇关于如何创建一个不可编辑的类型（如标签），当按钮是pressed的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！