javascript - テキストエリアに入力された各単語のスペースの後に選択解除可能な境界ボックスを作成する方法は?

Question

HTML / JQuery / Javascriptを使用してテキストエリアに単語を入力する機能を提供したいと思います（できない場合はテキストエリアである必要はありません）。スペースバーを押すと、単語が境界付けられますその横に「x」が表示され、削除できるようになります。

このような：

申し訳ありませんが、そのような要素/コントロールを何と呼ぶべきかわかりません。

助けてくれてありがとう！

Answer 1

このようなもの

html

<div id="box">
    <ul>
        <li><input type="text" id="type"/></li>
    </ul>
</div>

jquery

function closer(){
    $('#box a').on('click', function() {
       $(this).parent().parent().remove(); 
    });
}
$('#type').keypress(function(e) {
    if(e.which == 13) {//change to 32 for spacebar instead of enter
        var tx = $(this).val();
        if (tx) {
            $(this).val('').parent().before('<li><span>'+tx+'<a href="javascript:void(0);">x</a></span></li>');
            closer();
        }
    }
});

lord of the ringsこれは、Enter キーが押されたときに追加されるため、代わりに のように機能しlord of the ringsます。スペースバーでトリガーする場合はに変更e.which == 13します。e.which == 32

希望どおりに見えるようにするには、まだ css の変更が必要です。これは、動作の例にすぎません。

フィドルを作った：http://jsfiddle.net/filever10/bjBQZ/