將文本轉換為按鈕的輸入框

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內，因此其光標始終可以位於最后一個選擇之后。 此外，將輸入值分配給隱藏的輸入，可以在服務器端將其用作逗號分隔的值。