跨度在文本輸入字段？

Question

是否有可能將跨度作爲文本輸入字段的值？

我正在爲一個網站製作一個郵件系統，並希望一個漂亮的接收器輸入字段，其中包含添加的接收器並添加到輸入文本字段的值中。目前我使用一個單獨的「添加字段」，同時在span-container中顯示添加的接收器。我想將它們合併到一起。就像常規電子郵件軟件中的任何輸入字段一樣。

幫助將不勝感激！提前致謝！

Answer 1

簡答：不，您不能在<輸入/ >內包含< span/>。

您有幾個選項。您可以使用JavaScript來模擬電子郵件To：字段的行爲。例如。聆聽按鍵並在處理完後處理退格等操作。

另一種選擇是使列表像一個文本框出現（CSS樣式）。最後的< li/>是否包含清除樣式的文本框。每當用戶添加新電子郵件時，在文本框前插入一個新的< li/>。

E.G.

HTML：

<ul class="email-textbox"> 
    <li>bob@email.com;</li> 
    <li>jane@email.com;</li> 
    <li><input type="text" /></li> 
</ul> 

CSS：

.email-textbox { 
    background-color: #fff; 
    border: 1px solid #ccc; 
    padding: 2px 4px; 
} 

.email-textbox li { 
    display: inline-block; 
    list-style: none; 
    margin-left: 5px; 
} 

.email-textbox input { 
    background: none; 
    border: none; 
} 

的JavaScript（jQuery的，可以改變香草）

$(function() { 
    $('.email-textbox').find('input').focus(); 
}); 

您需要擴展這個JavaScript來包括按鍵處理等等，但它給出了總體思路。

演示：http://jsfiddle.net/UeTDw/1/

任何選項將需要但一些JavaScript。

如果你可以使用jQuery，你可以檢查出jQuery UI autocomplete

Answer 2

輸入文本字段通常用於接受原始文本輸入。嘗試在文本字段內部包裝輸入文本時，如果用戶能夠操作標籤，則會打開用戶錯誤和解析數據的潛在困難。

就我個人而言，我會建議保持當前的方法，但啓用某種形式的AJAX支持，使事情更具動態性，並且對用戶的錯誤更少。

（我的$ 0.02）這樣做將是對的樣式看起來像一個文本輸入一個div的頂層文本輸入

Answer 3

的一種方式。

<div id="fake-input"> 
    <span class="input-item">John Doe</span> 
    <span class="input-item">Jane Deere</span> 
    <input id="receiver-input" type="text" /> 
</div> 

可以去除所有的造型關閉接收機輸入的，所以它看起來是一個文本字段添加邊框，背景顏色，以及這樣的假輸入。當添加接收者時，您可以創建一個新的輸入項目範圍並將其附加到列表中。

Answer 4

TextExtjs可能是你想要的東西。這是一個jquery插件，允許在textarea中使用自動完成等可移動標籤。

和here是一個相關的SO討論 - 我發現這個插件 - 模仿Facebook上的一些輸入中發現的類似行爲。