Css 可能的话，在当前文本右侧的输入[type=text]中放置一个图标？

我需要一个带有以下规则的

输入[type=text]

字段：

输入[type=text]

-无边框，用户可以看到当前输入的文本

input[type=text]：焦点

-用户将在所有输入字段上看到一个输入框+边框

到目前为止，任务很简单

现在是最后一项不可能完成的任务：

input[type=text]：悬停

-与正常操作相同，但在当前输入文本的右侧显示编辑图标，而不是在输入控件的右侧

我从来没想过要怎么做，有什么想法吗？

---

问题是css无法控制输入字段中的文本。也许有一个普通的文本和输入字段，并在js中使用show/hide？

这并不完美，但我设法获得了一些概念证明，请注意，这是使用FontAwesome作为图标

HTML

<div>
    <input type="text" id="test">
    <span>edit <i class="fas fa-edit"></i></span>
</div>

左位置计算需要一些工作，使用值的长度而不是插入符号位置可能更容易

---

起初我尝试了一个伪元素，但这些元素无法添加到输入中，因此使用了div容器，但后来发现使用JavaScript也无法轻松修改它们的样式，因此使用了span元素。

我猜您需要JavaScript来读取当前的文本内容“clone”将其转换为应用了相同格式的不同元素，以便您可以确定其实际宽度（以像素为单位），然后相应地定位背景图像。或者尝试中概述的方法（如果可以使用

contenteditable

而不是实际的输入元素）

document.getElementById('test').addEventListener('keydown', handleInput);

document.getElementById('test').addEventListener('keyup', handleInput);

function handleInput(e) {
  if (document.getElementById('test').value != '') {
    let caretPosition = e.target.selectionStart;
    let newCaretPosition = ((caretPosition * 10) + 1) + 15;
    console.log('Caret at: ', caretPosition);
    document.querySelector('div > span').style.display = 'inline-block';
    document.querySelector('div > span').style.left = `${newCaretPosition}px`;
  } else {
    document.querySelector('div > span').style.display = 'none';
    document.querySelector('div > span').style.left = `15px`;
  }
}