javascript - 将 ul 作为输入

标签 javascript jquery html css

我想将 ul 作为输入,就像在这个 jsfiddle 中:http://jsfiddle.net/hailwood/u8zj5/

(但是我不想用tagit,我想自己实现)

我希望用户可以在输入中写一些东西,当他按下回车键时,一个带有 X 按钮的 li 将被插入到输入中。

我真的不知道如何实现它。

如果我知道如何将 ul 作为输入,我就会知道该怎么做。

请帮帮我:

假设我有 ul:

<ul id="countries"></ul>

我想让它像我上面给出的 jsfiddle 一样可写。

然后它应该是这样的:

$('#countries').keypress(function(e) {
    if(e.which == 13) {
        var value; // here I have to get the value of the input
        // insert the li to the ul:
        $('#countries').append('<li value="1">' + value +
                       '&nbsp;&nbsp;<span class="closeButton">X</span></li>');
    }
});

$('.closeButton').live('click', function(){
    $(this).parent().remove();
});

感谢任何帮助!

最佳答案

使用 contenteditable。

<ul id="countries" contenteditable="true"></ul>

http://www.w3schools.com/tags/att_global_contenteditable.asp

关于javascript - 将 ul 作为输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21798892/

相关文章:

javascript - div 刷新后 jquery 函数停止工作

javascript - 将彩色 Logo 转换为纯白色 Logo

javascript - 选择标签的形式,如果其中任何一个发生变化,我想触发一个事件

javascript - 根据下拉列表中的值更改文本框背景颜色

javascript - 删除按钮上的确认对话框

javascript - 使用 Bootstrap 作为建议框进行下拉

javascript - 动态创建内联键盘按钮 telegram api?

javascript - 在 JavaScript 中验证输入的电子邮件和密码

javascript - 将 nodetext 附加到 svg 元素

javascript - 柏树有什么方法可以等待多个预期条件