javascript - 如何在文本区域中输入每个单词的空格后创建可能取消选择的边界框？

Question

我想提供一个功能，一个人可以使用 HTML/JQuery/Javascript 将一个单词输入到 textarea 中（如果不能，则不必是 textarea），然后在按下空格键时，该单词将被限制并且旁边会显示一个“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();
        }
    }
});

这会在按下 enter 时添加，因此它将像lord of the rings而不是lord of the rings. 更改e.which == 13为e.which == 32是否要空格键触发它。

它仍然需要更改 css 以使其看起来完全符合您的要求，这只是它如何工作的一个示例。

做了一个小提琴：http: //jsfiddle.net/filever10/bjBQZ/