如何使用css，html和jquery创建标记样式？

Question

我在表单中有一个input[type=text]元素和一个用于选定元素的div。

我需要创建自己的自定义标签插件容器，而我的问题是标签容器的CSS样式和布局以及外观。

这是我的实际阶段（非常差）： http : //jsfiddle.net/db8upk61/1/

我想要这样的东西：

挑战

• 如何模拟这些元素之间的输入边界？
• 像上面的例子，如何从输入元素中删除边框？
• 如何在与输入相同的行中保存标签？

Answer 1

有很多插件可以做到这一点，但是，您需要这样做。

您可以创建一个模拟输入的容器，并且可以在该容器内将带有边框白色的真实输入放入，我举了一个例子，看一下：

http://jsfiddle.net/93n2af0e/

CSS代码：

.input-select-tag{
    background-color: #FFFFFF;
    boder: 1px solid #F1F1F1;
    height: 36px;
    width: 450px;
}
.selected-tags{
    padding: 2px;
}
.button{
    float: left;
    padding: 5px;
    margin-left: 2px;
}
.input{
    float: left;
    border: #FFFFFF;
    margin-left: 2px;
    padding: 5px;
}
.clear{
    clear: both;
}

HTML：

<form class='form-horizontal well'>
    <div class='control-group'>

        <div class='input-select-tag'>
            <div class='selected-tags'>
                <span class='alert button alert-info'>tag1 <a href="javascript:;" title='remove' >x</a></span> 
                <span class='alert button alert-info'>tag2 <a href="javascript:;" title='remove' >x</a></span>          
            </div>

            <input type='text' name='selectTags' class='input' size="40"/>    
            <div class='clear'></div>
        </div>
    </div>
</form>

希望能帮助到你。

Answer 2

 var i = 7; $("input").focus(function(e) { // set cursor position if (!this.value.length) { this.value = $.map(Array(i * $(".alert").length), function() { return " " }).join(" ") } }).change(function(e) { // append new "tag" $(".alert").first().clone().text(function(i, text) { return text.replace(/tag1/, e.target.value) }).appendTo($(".alert").parent()); $(this).val("").focus() }).closest("form").submit(function(e) { e.preventDefault() }) 

 <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <form class='form-horizontal well'> <div class='control-group'> <div class='selected-tags'> <span class='alert alert-info'>tag1 <a href="javascript:;" title='remove' >x</a></span> <span class='alert alert-info'>tag2 <a href="javascript:;" title='remove' >x</a></span> </div> <label>Tags</label> <br> <input type='text' name='selectTags' /> </div> </form> <style> .control-group { position: relative; } .alert { position: relative; top: 47px; font-size: 12px; padding: 2px; margin: 2px; } input { white-space: pre; width: 100%; } </style> 

jsfiddle http://jsfiddle.net/db8upk61/2/