如何使用 JavaScript 選擇性地設定輸入欄位值的部分樣式？

輸入欄位值的部分樣式

增強輸入欄位的美觀性是 Web 開發中常見的任務。一個有趣的場景涉及在使用者鍵入時選擇性地設定輸入欄位值的部分樣式。雖然這種樣式最初看起來很簡單，但瀏覽器會在整個輸入元素上一致地套用樣式。

為了規避此限制並創建所需的效果，需要更複雜的解決方案。 JavaScript 是完成此任務的合適工具，它允許我們動態地操作輸入元素。關鍵是將輸入欄位細分為三個不同的部分：

• 之前：用戶當前遊標位置之前的文字
• 編輯： 使用者目前遊標處的文字position
• after:使用者目前遊標位置之後的文字

使用 JavaScript，我們可以在這三個部分周圍插入 span 元素並相應地應用所需的樣式。這種方法有效地創建了一個模擬輸入字段，模擬我們尋求的樣式功能。

考慮以下範例標記：

<div class="input">
  <span class="nonEdited before">foo</span>
  <span class="edited">fizz</span>
  <span class="nonEdited after">bar</span>
</div>

透過監視使用者交互，例如點擊、按鍵和按鍵， JavaScript 可以不斷調整標記以正確表示三個文字部分。這允許對輸入欄位的內容進行即時樣式設置，最終達到選擇性地對值的部分樣式進行樣式設定的效果。

以上是如何使用 JavaScript 選擇性地設定輸入欄位值的部分樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！