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

我試圖創建一個將輸入文本轉換爲「按鈕」onblur的文本輸入域。例如，在輸入電子郵件地址的Hotmail「新電子郵件頁面」中，當您輸入分隔符（分號或逗號）時，它將使其成爲一個帶有刪除按鈕的小按鈕對象。有人知道怎麼做嗎？將文本轉換爲按鈕的輸入框

我做了一種解決方法的事情，我想要的地方，我有一個邊框的div。在div中有一個輸入字段，蛀蟲不可見，隱藏按鈕。我有一個js函數，獲取輸入值，並使該按鈕可見的值，但這不是什麼即時通訊尋找..

其實我只是意識到這個以及當我添加標籤的帖子

來源

2011-11-10 zareef

這是一個多值字段。看看this one。

該功能並不複雜。這是一個HTML列表，您選擇的每個值都會轉換爲LI節點並附加到該列表。輸入字段位於最後一個LI內，因此其光標始終可以在最後一個選擇之後。此外，輸入值被分配給一個隱藏的輸入，它可以在服務器端用作逗號分隔值。

來源

2011-11-10 21:53:41

謝謝，我想我會修改這個轉換所有文本，而不是從自動選擇菜單中的選項 – zareef

這裏有一個簡單的方法來僞造它（和它看起來這是類似於SO確實爲標籤）：

創建文本<input>，並確保其邊界和輪廓都設置爲none 。
爲您的標籤（或按鈕或其他）創建一個容器，並將其放置在<input>旁邊。
監測<input>上的事件;當用戶嘗試輸入「中斷」字符（如分號或逗號）時，請創建該按鈕，將其添加到容器中，清空<input>的值，並防止默認值（以便「中斷」字符沒有插入標籤，或留在<input>）。

這就是基本的想法。一旦你做到了這一點，你可以將事件偵聽/處理程序添加到按鈕，或他們的風格任你想要哪個，等

Here's the simple example I cooked up：

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;

來源

2011-11-10 21:49:02 sdleihssirhc

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

回答

相關問題