javascript - 可通过 html、javascript 编辑列表

Question

这是我尝试开发的 UI 场景:有一个文本框字段，其下方有两个按钮。单击第一个按钮时，将出现一个弹出窗口，用户必须在其中添加一个 IP 地址。在弹出窗口中按下提交，IP 地址将显示在文本区域中。用户可以继续添加 IP 地址，这些 IP 地址将在不同行的文本区域中显示。用户应该能够从框中选择一个特定的 IP 地址并使用第二个按钮将其删除。用户不应该能够直接在文本字段中输入数据。有任何想法吗 ？

Answer 1

我建议您不要使用 <textarea>因为这涉及嗅探选择等。而是使用简单的容器元素(例如，<li> 中的 <ul> s |/<ol> 参见@David Thomas 的评论)来保存输入的 IP 地址(每个一个)。

我相信您会从 this JsFiddle 中得到灵感。 .

HTML

<ul id="addresses"></ul>
<hr />
<a href="#" id="add">Add...</a>

JS(假设是 jQuery。您还需要一些框架来处理选择。)

var deleteHandler = function() {
    $(this).parent().remove();
}

$("#add").click(function() {
    var ip = prompt("Enter IP:");
    if (ip) {
        var $deleteIp = $("<a />", {"class": "delete"})
            .text("X")
            .click(deleteHandler);
        $("<li />")
            .text(ip)
            .append($deleteIp)
            .appendTo("#addresses");
    }

    return false;
});

只是一个演示——被认为是改进的候选者:)