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

對輸入值的特定部分進行樣式設定

關於輸入欄位值的特定部分的樣式，值得注意的是樣式本質上適用到一個完整的元素。然而，要達到預期的效果，需要採用創造性的方法來遵守語意標記約束。

解決方案概述

解決方案涉及根據用戶的編輯點劃分輸入字段分為三個部分：

1. 編輯點之前的文字
2. 可編輯文字在編輯點
3. 編輯點之後的文字

動態元素操作

由於編輯點可以移動，JavaScript就變得必要了動態解決方案。最初，將輸入元素替換為樣式模仿輸入欄位的容器元素。然後，使用 JavaScript 將上述三個部分包裝在單獨的元素（例如，span）中，並相應地應用所需的顏色。

生成的標記

以下HTML 結構可以作為動態生成的替換標記的起點：

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

事件處理

最後，可以利用click、keydown 和keyup事件來識別三個部分並適當地包裝它們。這可確保樣式動態反映使用者的輸入。

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