Как создать стиль тегов с помощью css, html и jquery?

Question

У меня есть элемент input[type=text] и еще один div для выбранных элементов в моей форме.

Мне нужно создать собственный собственный контейнер плагинов тегов, и моя проблема заключается в стиле и макете для контейнера тегов и его внешности.

Это моя фактическая стадия (очень плохо): 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/