如何使用 JavaScript 设置输入字段值的特定部分的样式？

设置输入字段值的特定部分的样式

在 内字段中，更改用户输入的特定部分的样式可能具有挑战性。由于样式通常适用于整个元素，因此无法直接实现。

基于 JavaScript 的解决方案

为了规避此限制，可以采用基于 JavaScript 的方法。将 替换为具有容器元素（如

<div>）的元素并将其样式设置为类似于输入字段。

输入字段的划分

当用户键入时，识别该字段的三个部分：

• 变更前（未编辑）
• 变更时（已编辑）
• 更改后（未编辑）

将这些分区包装在单独的元素中，例如 。标记示例：

<div>

事件处理和样式调整

使用 click、keydown 和 keyup 事件动态识别三个分区。根据需要对这些跨度应用样式以实现所需的效果。

示例 HTML：

<div class="input">

用于替换输入的 JavaScript：

let input = document.getElementById("fakeInput");
let originalInput = document.querySelector("input");
input.replaceWith(originalInput);

事件处理和跨度添加：

originalInput.addEventListener("input", (e) => {
  let before = originalInput.value.substring(0, e.target.selectionStart);
  let edited = originalInput.value.substring(e.target.selectionStart, e.target.selectionEnd);
  let after = originalInput.value.substring(e.target.selectionEnd);

  let nonEditedBefore = document.createElement("span");
  nonEditedBefore.className = "nonEdited before";
  nonEditedBefore.textContent = before;

  let editedSpan = document.createElement("span");
  editedSpan.className = "edited";
  editedSpan.textContent = edited;

  let nonEditedAfter = document.createElement("span");
  nonEditedAfter.className = "nonEdited after";
  nonEditedAfter.textContent = after;

  input.appendChild(nonEditedBefore);
  input.appendChild(editedSpan);
  input.appendChild(nonEditedAfter);
});

以上是如何使用 JavaScript 设置输入字段值的特定部分的样式？的详细内容。更多信息请关注PHP中文网其他相关文章！