Question

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

我做了一个解决方法的事情，我想要一个带边框的div。在div中有一个输入字段，其中蛀虫不可见，隐藏按钮。我有一个js函数，它接受输入值并使按钮可见，但这不是我想要的...

实际上我刚刚意识到stackoverflow在我向帖子添加标签时也会这样做

Answer 1

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

创建文字<input>，并确保其边框和轮廓都设置为无。
为您的代码（或按钮或其他内容）创建一个容器，并将其放在<input>旁边。
监控keydown上的<input>事件;当用户尝试输入“break”字符（例如分号或逗号）时，创建按钮，将其添加到容器中，清空<input>的值，并防止默认（以便“break”字符未插入标记，或留在<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

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

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

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

2 个答案: