卡卡網(wǎng)

我們在網(wǎng)頁上使用的Textarea文本框，多數(shù)是沒有行號的，這是默認(rèn)的樣子。如果你想要把它設(shè)計成一個編輯器的樣子，那么需要給它添加一個行號，這怎么實現(xiàn)呢？本文將給大家介紹實現(xiàn)方法。

demodownload

在本實例中，將介紹如何使用盡可能少的 DOM 節(jié)點以及僅10行JavaScript代碼，為任何 html textarea 自行添加行號。

創(chuàng)建 HTML

我們需要一個textarea，還有行號的容器，以及整個編輯器的包裝器，因此我們可以相應(yīng)地對其進(jìn)行布局，代碼如下：

<div class="editor">
    <div class="line-numbers">
        <span></span>
    </div>
    <textarea></textarea>
</div>

我們要將行號存儲在div中，每行將由一個空的span表示。我們將通過 CSS 添加實際數(shù)字，以便我們可以根據(jù)需要自動對它們進(jìn)行編號。

設(shè)置一個 keyup 事件監(jiān)聽器

以編程方式添加行號，我們需要一個keyup附加到textarea，代碼如下：

const textarea = document.querySelector('textarea')
const lineNumbers = document.querySelector('.line-numbers')

textarea.addEventListener('keyup', event => {
  const numberOfLines = event.target.value.split('\n').length

  lineNumbers.innerHTML = Array(numberOfLines)
    .fill('<span></span>')
    .join('')
})

首先，我們需要查詢 DOM 以獲取textarea和容器的行號，然后我們向textarea中添加了一個keyup事件偵聽器，以便每次有人輸入時，它都可以相應(yīng)地更新行號。

我們在這里所做的就是根據(jù)換行符 (\n) 拆分內(nèi)容。然后我們根據(jù)新行的數(shù)量創(chuàng)建一個數(shù)組，在其中添加一個空范圍，然后將所有內(nèi)容重新組合成一個字符串，DOM 元素的 HTML lineNumbers 然后被這個字符串替換。

如果我們現(xiàn)在開始輸入textarea，我們可以看到每次我們按下回車鍵來創(chuàng)建一個新行時，span都會在行號中添加一個新的空行。然而，目前沒有數(shù)字出現(xiàn)，所以讓我們跳入 CSS 來解決這個問題。 

 
添加換行符時添加空跨度

設(shè)置 Textarea 文本區(qū)域的樣式

現(xiàn)在讓我們看一下樣式，因為我們將使用 CSS 自己添加行號。首先，我們希望整個編輯器顯示為 flex，以便它們（行號和textarea）彼此相鄰放置：

.editor {
  display: inline-flex;
  gap: 10px;
  font-family: monospace;
  line-height: 21px;
  background: #282a3a;
  border-radius: 2px;
  padding: 20px 10px;
}

textarea {
  line-height: 21px;
  overflow-y: hidden;
  padding: 0;
  border: 0;
  background: #282a3a;
  color: #FFF;
  min-width: 500px;
  outline: none;
  resize: none;
}

我們還希望為行號和textarea本身提供一致的排版，以便文本將緊挨著行號對齊。我們刪除了textarea中的任何填充和邊框，因為這會再次移動文本，使其與行號不對齊。最后，我們要分別刪除調(diào)整大小選項和帶有resize和overflow-y屬性的滾動條。

 
添加必要的樣式以避免錯位

現(xiàn)在讓我們看看如何通過 CSS 實際添加行號。將以下規(guī)則添加到樣式表中：

.line-numbers {
  width: 20px;
  text-align: right;
}

.line-numbers span {
  counter-increment: linenumber;
}

.line-numbers span::before {
  content: counter(linenumber);
  display: block;
  color: #506882;
}

我們可以結(jié)合使用CSS自帶的counter函數(shù)和counter-increment來添加行號，該counter函數(shù)需要一個我們?yōu)?code>counter-increment定義的任意名稱，這將在::before偽元素中添加內(nèi)容。

確保還定義了 display 為 block 以便將每個跨度換行。

另一件需要注意的事情是將文本右對齊。添加所有內(nèi)容后，當(dāng)我們開始向textarea中添加新行時，我們會得到以下行為：

添加 Tab 鍵支持

總結(jié)一下，我們還要添加選項卡支持?，F(xiàn)在，如果您在textarea中點擊 Tab 鍵，它將把焦點帶到下一個可聚焦元素，因為這是瀏覽器中的默認(rèn)行為。為了防止這種情況，我們需要向textarea添加一個keydown事件監(jiān)聽器：

textarea.addEventListener('keydown', event => {
  if (event.key === 'Tab') {
    const start = textarea.selectionStart
    const end = textarea.selectionEnd

    textarea.value = textarea.value.substring(0, start) + '\t' + textarea.value.substring(end)

    event.preventDefault()
  }
})

首先，我們需要檢查輸入是否來自 Tab 鍵。我們可以使用event.key，然后我們需要抓取選擇，因為我們希望選項卡也能在文本中工作。為此，我們可以使用selectionStart和selectionEnd。我們可以使用這些來重建textarea的值，包括一個額外的制表符 (\t)。

不要忘記通過調(diào)用event.preventDefault來阻止瀏覽器行為的默認(rèn)操作，否則，在textarea內(nèi)按 Tab 鍵將聚焦于下一個可聚焦元素。

結(jié)論

總之，向任何textarea添加行號相對簡單，只需幾行代碼即可輕松完成。如果你只需要添加行號而不需要其他任何東西，那么你最好自己實現(xiàn)，而不是為此引入整個庫。

標(biāo)簽: textarea