快捷導(dǎo)航

基于原生CSS+JS實(shí)現(xiàn)一個(gè)標(biāo)簽輸入框

更新時(shí)間：2022年04月07日 15:38:50 作者：XboxYan

在各種框架大行其道的氛圍下，有些原生的屬性和方法可能都不太關(guān)注了，這也不失為是一種損失。本文就將利用原生CSS+JS實(shí)現(xiàn)一個(gè)簡(jiǎn)單的標(biāo)簽輸入框，感興趣的可以了解一下

一、自適應(yīng)輸入框布局

不管什么組件，布局都是最重要的。這個(gè)布局分為標(biāo)簽和輸入框兩個(gè)部分，假設(shè) HTML 如下：

<div class="tags-content">
  <tag>CSS<a class="tag-close"></a></tag> 
  <input class="tags-input" placeholder="添加標(biāo)簽">
</div>

簡(jiǎn)單修飾一下：

.tags-content{
   display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 6px;
    width: 400px;
    box-sizing: border-box;
    padding: 8px 12px;
    border: 1px solid #D9D9D9;
    border-radius: 4px;
    font-size: 16px;
    line-height: 24px;
    color: #333;
    outline-color: #4F46E5;
    overflow: auto;
    cursor: text;
}
tag{
    display: flex;
    align-items: center;
    padding: 4px 0 4px 8px;
    font-size: 16px;
    line-height: 24px;
    background: #F5F5F5;
    color: rgba(0, 0, 0, 0.85);
    cursor: default;
}
tag-close{
    width: 18px;
    height: 18px;
    cursor: pointer;
    background: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.578 5l2.93-3.493a.089.089 0 0 0-.068-.146h-.891a.182.182 0 0 0-.137.064l-2.417 2.88-2.416-2.88a.178.178 0 0 0-.137-.064h-.89a.089.089 0 0 0-.069.146L4.413 5l-2.93 3.493a.089.089 0 0 0 .068.146h.89a.182.182 0 0 0 .138-.064l2.416-2.88 2.417 2.88c.033.04.083.064.137.064h.89a.089.089 0 0 0 .069-.146l-2.93-3.493z' fill='%23000' fill-opacity='.45'/%3E%3C/svg%3E") center no-repeat;
}
.tags-input{
    flex: auto;
    border: 0;
    outline: 0;
    padding: 4px 0;
    line-height: 24px;
    font-size: 16px;
}
.tags-content:focus-within,
.tags-content:active{
    outline: auto #4F46E5;
}

注意幾點(diǎn)實(shí)現(xiàn)技巧：

標(biāo)簽的間隔可以用 gap 實(shí)現(xiàn)。
為了讓輸入框的區(qū)域鋪滿剩余空間，這里用到了flex: auto。
為了讓父級(jí)處于聚焦?fàn)顟B(tài)，這里用到了:focus-within。

效果如下：

但是這里的輸入框用 input 還是有些問(wèn)題的，如下所示：

由于 input 輸入內(nèi)容無(wú)法跟隨寬度自適應(yīng)，所以有時(shí)候會(huì)出現(xiàn)文字被截?cái)嗟那闆r：

理想情況下，當(dāng)輸入內(nèi)容較多時(shí)，應(yīng)該整體換行。如何實(shí)現(xiàn)呢?可以用普通的 div 來(lái)實(shí)現(xiàn)。

<div class="tags-content">
  <tag>CSS<a class="tag-close"></a></tag> 
  <div class="tags-input" placeholder="添加標(biāo)簽"></div>
</div>

可以通過(guò)添加contenteditable或者以下 CSS 來(lái)實(shí)現(xiàn)：

.tags-input{
  -webkit-user-modify: read-write-plaintext-only;
}

這個(gè)屬性表示只允許輸入純文本，有興趣的可以參考張?chǎng)涡竦倪@篇文章：小tip: 如何讓contenteditable元素只能輸入純文本[1]。

這樣可以自適應(yīng)內(nèi)容寬度了。

二、輸入框占位提示

由于輸入框已經(jīng)從 input 換成了普通的 div 標(biāo)簽，并沒(méi)有 placeholder 特性。不過(guò)，我們?nèi)匀豢梢酝ㄟ^(guò)其他 CSS 特性來(lái)實(shí)現(xiàn)占位效果，當(dāng)輸入框沒(méi)有內(nèi)容時(shí)，就可以匹配到 :empty選擇器，然后通過(guò)偽元素::before動(dòng)態(tài)生成 placeholder 內(nèi)容，具體實(shí)現(xiàn)如下：

.tags-input:empty::before{
    content: attr(placeholder);
    color: #828282;
}

效果如下：

這樣就幾乎和 input 的占位效果一致了。

另外還有一種情況，如果需要僅在沒(méi)有任何標(biāo)簽的情況下才顯示占位，如何實(shí)現(xiàn)呢?可以想想，在沒(méi)有任何標(biāo)簽的情況下，HTML 就變成了這樣：

<div class="tags-content">
  <div class="tags-input" placeholder="添加標(biāo)簽"></div>
</div>

這種情況，就僅剩輸入框唯一元素了，唯一元素可以通過(guò):only-child來(lái)匹配，所以實(shí)現(xiàn)如下：

.tags-input:only-child:empty::before{
    content: attr(placeholder);
    color: #828282;
}

這樣添加一個(gè)偽類(lèi)就解決了。

兩種需求都符合認(rèn)知，看設(shè)計(jì)如何決定了。

三、標(biāo)簽的輸入與刪除

要實(shí)現(xiàn)標(biāo)簽的輸入與刪除就需要 JS 出馬了，只需要監(jiān)聽(tīng)鍵盤(pán)的“回車(chē)”和“退格”兩個(gè)鍵值。需要注意的是，默認(rèn)情況下，普通 contenteditable元素在回車(chē)時(shí)，會(huì)出現(xiàn)換行，如下：

因此，在監(jiān)聽(tīng)鍵盤(pán)事件時(shí)需要阻止默認(rèn)事件，然后動(dòng)態(tài)創(chuàng)建標(biāo)簽元素，通過(guò) before添加到輸入框前面，具體實(shí)現(xiàn)如下：

// TagInput是輸入框
TagInput.addEventListener('keydown', function(ev) {
  if (ev.key === 'Enter') {
    ev.preventDefault()
    if (this.innerText) { // 輸入框內(nèi)容通過(guò) innerText 獲取
      const tag = document.createElement('TAG');
      tag.innerHTML = this.innerText + '<a class="kalos-tag-close"></a>';
      this.before(tag);
      this.innerText = '';
    }
  }
})

這樣就能正常創(chuàng)建標(biāo)簽了。

然后是標(biāo)簽的刪除。

這里有兩種途徑，首先看鍵盤(pán)的刪除，具體邏輯是當(dāng)輸入框內(nèi)容為空時(shí)刪除標(biāo)簽，很簡(jiǎn)單，刪除的標(biāo)簽就是輸入框的前面一個(gè)元素，通過(guò)previousElementSibling獲取，具體實(shí)現(xiàn)如下：

TagInput.addEventListener('keydown', function(ev) {
  if (ev.key === 'Backspace' && !this.innerText) {
    this.previousElementSibling?.remove(); // 需要判斷前一個(gè)元素是否存在
  }
})

然后是點(diǎn)擊刪除圖標(biāo)的刪除。由于標(biāo)簽是動(dòng)態(tài)生成的，所以這里需要用事件委托的方式來(lái)添加刪除事件。

// TagContent是父級(jí)容器
TagContent.addEventListener('click', function(ev) {
  if (ev.target.className === 'tag-close') {
    ev.target.parentNode.remove();
  }
  TagInput.focus(); //點(diǎn)擊任意地方輸入框都需要聚焦
})

這樣就實(shí)現(xiàn)了文章開(kāi)頭的所示效果：

四、選擇框架還是原生

總結(jié)一下！

整體實(shí)現(xiàn)并不算復(fù)雜，不少交互邏輯 CSS 也可以輕松實(shí)現(xiàn)，JS 也就 10 來(lái)行代碼，這里總結(jié)一下實(shí)現(xiàn)要點(diǎn)：

普通 div 元素輸入純文本可以使用 -webkit-user-modify: read-write-plaintext-only
普通 div 元素輸入可以自適應(yīng)內(nèi)容寬度
普通 div 元素輸入框的 placeholder 占位可以通過(guò) :empty 結(jié)合偽元素實(shí)現(xiàn)
回車(chē)事件需要阻止默認(rèn)事件，不然會(huì)換行
在一個(gè)元素的前面新增元素可以用 before 方法
刪除一個(gè)元素的前面一個(gè)元素，可以用 previousElementSibling.remove 方法
給動(dòng)態(tài)生成的元素綁定事件可以用事件委托的方式

在各種框架大行其道的氛圍下，有些原生的屬性和方法可能都不太關(guān)注了，這也不失為是一種損失。當(dāng)然，我本身也是各種框架都會(huì)用，特別是大型、復(fù)雜的交互頁(yè)面，一般比較小的交互，比如文章這個(gè)例子，在 ant design 中有相關(guān)的組件，也使用過(guò)，因?yàn)檎w UI 全是這種風(fēng)格，設(shè)計(jì)也是按照這個(gè)設(shè)計(jì)的。后來(lái)需要單獨(dú)開(kāi)發(fā)一個(gè) chrome 插件，也用到了這樣一個(gè)交互，但是僅僅用了這樣一個(gè)組件，引入整個(gè)框架就過(guò)于累贅了，所以還是選擇直接原生實(shí)現(xiàn)，簡(jiǎn)單方便。

以上就是基于原生CSS+JS實(shí)現(xiàn)一個(gè)標(biāo)簽輸入框的詳細(xì)內(nèi)容，更多關(guān)于JS標(biāo)簽輸入框的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: