Панель с закрывающей кнопкой для слова/текста

Question

Есть ли способ сделать что-то вроде X в тексте с помощью css или jquery? Изображение, приведенное ниже, из gmail добавляет контакты textarea (что позволяет добавлять несколько контактов, а также удалять выбранный контакт, используя кнопку закрытия рядом с именем).

Есть ли способ, посредством которого то же самое можно достичь?

Answer 1

Вы можете использовать и изображение, чтобы сделать это.

Я предлагаю вам использовать JavaScript события

например вы редактируете CSS и делаете его похожим на изображение выше, когда вы нажимаете enter или tab.

код, который будет

<form action="#"> 
    <input type="text" name="txt" onkeypress="handle()" /> 
</form> 

<script> 
    function handle(e){ 
     if(e.keyCode === 13){  //13 corresponds to pressing enter 
      //here you apply the CSS Change 
     } 

     return false; 
    } 
</script> 

используется изображение для «X» и удалить данную строку, если она нажата.

Answer 2

Используя css, вы можете сделать это, что содержимое автоматически появляется после элемента с использованием псевдоэлемента :after.

Например, с этим HTML:

<div class="closePanel"> 
    <div> 
     text_text 
    </div> 
</div> 

Вы можете добавить CSS автоматически размещать отформатированный «х» после того, как содержание внутреннего элемента.

.closePanel :after 
{ 
    content: "x"; 
    /* Add other css styles here */ 
} 

jsfiddle: http://jsfiddle.net/ax6yuwox/2/.

Answer 3

В случае, если вы хотите плагин третьей стороны, здесь:

http://tagedit.webwork-albrecht.de/