如何使用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/