Wie man ein Textfeld erstellen kann

Question

In stackoverflow können wir ein Textfeld "Tags" sehen, wenn wir einen Beitrag machen.

Wenn Sie ein Wort und ein Leerzeichen eingeben, wird es zu einem Tag. Nachdem wir ein Tag geworden sind, löschen wir einen Buchstaben von einem Wort. Aber wir können das Wort selbst löschen, indem wir auf das X-Bild klicken.

Ich möchte ein ähnliches Textfeld für Tags erstellen. In stackoverflow gibt es automatisch vorschlagen, auch mit diesem Textfeld verbunden, aber ich brauche das nicht.

Jede Hilfe/link sei darauf hingewiesen,

Answer 1

Es gibt eine ganze Reihe von diesen online sind. Ich habe einige ziemlich leicht mit Google gefunden. Sehen Sie sich diese ein Beispiel:

http://xoxco.com/projects/code/tagsinput/

Answer 2

Edit: Hier ist ein ähnliches Beispiel mit einem etwas anderen (besser) Funktionalität:
https://stackoverflow.com/a/14083331/383904

---

Eine nette Sie kleine Demo kann leicht aktualisiert und modifiziert werden:

$('#tags input').on('focusout',function(){  
 
    var txt = $.trim(this.value); 
 
    if(txt) { 
 
    $(this).before('<span class="tag">'+txt+'</span>'); 
 
    } 
 
    this.value = ""; 
 
}); 
 

 

 
$('#tags').on('click','.tag',function(){ 
 
    if(confirm("Really delete this tag?")) $(this).remove(); 
 
});

#tags{ 
 
    float:left; 
 
    border:1px solid #ccc; 
 
    padding:5px; 
 
    font-family:Arial; 
 
} 
 
#tags span.tag{ 
 
    display:block; 
 
    float:left; 
 
    color:#fff; 
 
    background:#689; 
 
    padding:5px; 
 
    padding-right:25px; 
 
    margin:4px; 
 
} 
 
#tags span.tag:after{ 
 
    position:absolute; 
 
    content:"x"; 
 
    border:1px solid; 
 
    padding:0 4px; 
 
    margin:3px 0 10px 5px; 
 
    cursor:pointer; 
 
    font-size:10px; 
 
} 
 
#tags input{ 
 
    background:#eee; 
 
    border:0; 
 
    margin:4px; 
 
    padding:7px; 
 
    width:auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="tags"> 
 
    <input type="text" value="" placeholder="Add a tag" /> 
 
</div>