如何使用 JavaScript 設定輸入欄位值的特定部分的樣式？

設定輸入欄位值的特定部分的樣式

在 內欄位中，變更使用者輸入的特定部分的樣式可能具有挑戰性。由於樣式通常適用於整個元素，因此無法直接實現。

基於 JavaScript 的解決方案

為了規避此限制，可以採用基於 JavaScript 的方法。將 替換為具有容器元素（如

）的元素並將其樣式設定為類似於輸入欄位。

輸入欄位的分割

當使用者鍵入時，辨識該欄位的三個部分：

• 變更前（未編輯）
• 變更時（已編輯）
• 更改後（未編輯）

將這些分區包裝在單獨的元素元素中，例如。標記範例：

事件處理和樣式調整

使用 click、keydown 和 keyup 事件動態辨識三個分區。根據需要對這些跨度套用樣式以實現所需的效果。

範例HTML：

用來取代輸入的JavaScript：

事件處理和跨度添加：

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