帶有按鈕或跨度的輸入字段

Question

我正在考慮要開發的界面的功能，但是我不確定如何實現它。 我基本上是在輸入字段的一側有一組按鈕，該按鈕在輸入內部插入一個span / button來表示單擊的按鈕。

因此，在我想象的界面的簡化版本中，我可以像往常一樣在字段中鍵入內容，但是當我按下側面的按鈕之一時，它們也會在字段中插入文本。 假設我按下按鈕1，它會插入文本“ Hello”，按鈕2會插入文本“ Emma”。 相當容易。

我要創建的更復雜的版本的工作原理類似，但是當我單擊按鈕1時，它將在文本字段內插入一個氣泡。 氣泡有其自己的背景色，包含單詞“ Hello”，並且在右上角有一個小的x可以將其消除。 插入氣泡后，它將克拉越過插入的氣泡，我可以繼續正常鍵入。 如果當克拉位於氣泡右側時按退格鍵，它將立即刪除整個氣泡。 這是一個簡單的示例圖像：

我覺得我已經在互聯網上看過很多這類的東西，但是我不知道它是如何完成的。 有沒有辦法通過輸入字段來實現這一目標？ 如果不可能，我應該考慮哪些替代方案？

Answer 1

我認為您不能僅用input就可以做到這一點，除非您更改頁面輸入的標准實現:)

我認為您最好的選擇是擁有這樣的結構：

<div class="wrapper">
  <div class="shownContent">Is that <div class="tag">Emma</div></div>
  <input class="underlyingInput"/>
  <div class="tagsButtons" />
</div>

• undelyingInput已隱藏-可用但隱藏。
• 風格shownContent看起來像一個輸入。
• 然后，您可以處理對shownContent單擊：如果他們單擊了顯示的內容，則將隱藏的基礎輸入聚焦，但將shownContent顯示為聚焦。
• 現在，如果用戶在單擊shownContent之后開始寫shownContent ，那么該文本實際上已經輸入了！
• 當輸入中的值更改時，請使用新值將其解析為文本和標簽，並設置shownContent的html內容。

一旦掌握了這一點，從左側單擊中刪除標簽並從右側單擊中添加標簽應該很簡單。

Answer 2

您可以嘗試使用一系列輸入，而不只是一個輸入：

<div class="wrapper">
  <input /> <!-- "Is that " -->
  <button>Emma</button>
  <input /> <!-- "? " -->
  <button>Hello</button>
  <input /> <!-- ", " -->
  <button>Emma</button>
  <input /> <!-- "!" -->
</div>

包裝器僅用於樣式設置：您可以為其指定邊框，並使input元素無邊界。

您需要在input元素上覆蓋很多鍵盤命令。 例如，在最后一個input的開始處的后退間距將導致刪除前一個按鈕，並合並兩個相鄰input元素的內容。

您還需要考慮按Home和End鍵（以及其他OS中的等效鍵）的效果。

此外，您需要確保input元素隨着內容的變化而調整大小。 這有點棘手，但可行！

這是一個起點： https : //codepen.io/exonj/pen/jxQxGV

Answer 3

這是一個標簽輸入。 簽出這個Bootstrap TagsInput 。 它具有所需的功能。