将文本转换为按钮的输入框

Question

我正在尝试创建一个文本输入字段，以将输入文本转换为“按钮” onblur。 例如，在hotmail的“新电子邮件页面”中，当您输入电子邮件地址时，当您输入定界符（分号或逗号）时，它将变成带有删除按钮的小按钮状对象。 有人知道怎么做吗？

我对有边框的div想要的东西做了某种解决方法。 在div中，有一个输入字段，其中钻工不可见，并且隐藏了一个按钮。 我有一个js函数，它接受输入值并使按钮可见并带有该值，但这并不是我正在寻找的。

实际上，我只是在将标签添加到帖子中时才意识到stackoverflow也能做到这一点

Answer 1

这是一种伪造它的简单方法（看起来类似于SO对标签所做的操作）：

1. 创建您的文本<input> ，并确保其边框和轮廓都未设置。
2. 为标签（或按钮或其他内容）创建一个容器，并将其放在<input>旁边。
3. 监视<input>上的keydown事件； 当用户尝试输入“分号”字符（例如分号或逗号）时，请创建按钮，将其添加到容器中，清空<input>的值，并防止出现默认值（以使“分号” “字符未插入标记中，或未留在<input> ）。

这是基本思想。 完成此操作后，您可以向按钮添加事件侦听器/处理程序，或将其设置为所需的样式，等等。

这是我制作的简单示例 ：

var inp = document.getElementById('yourInput'),
    tags = document.getElementById('yourContainer'),
    breaks = {
        186: 1, // semi-colon
        188: 1 // comma
    };

function createTag(txt) {
    var elem = document.createElement('span');
    txt = document.createTextNode(txt);
    elem.appendChild(txt);
    elem.className = 'tag';
    tags.appendChild(elem);
}

function monitorText(e) {
    e = e || window.event;
    e = e.keyCode;
    if (breaks[e]) {
        e = inp.value;
        inp.value = '';
        createTag(e);
        return false;
    }
}

inp.focus();
inp.onkeydown = monitorText;

Answer 2

这是一个多值字段。 看看这个 。

功能不是那么复杂。 这是一个HTML列表，您选择的每个值都将转换为LI节点并附加到该列表中。 输入字段位于最后一个LI内，因此其光标始终可以位于最后一个选择之后。 此外，将输入值分配给隐藏的输入，可以在服务器端将其用作逗号分隔的值。