Поместите значок в поле ввода [type = text] на ПРАВО текущего текста, возможно?

Question

Мне нужно поле input[type=text] с этими правилами:

input[type=text] - без рамки, пользователь увидит текущий введенный текст
input[type=text]:focus - пользователь увидит поле ввода + рамкуна всех полях ввода.

Пока что простая задача.

Теперь для последней, но невыполнимой задачи:

input[type=text]:hover - то же, что и обычно, НО показать значок редактированиянаправо от текущего введенного текста, а НЕ справа от элемента управления вводом.

Мне никогда не удавалось придумать, как это сделать, есть идеи?Проблема в том, что в css нет способа контролировать текст внутри поля ввода.Может быть, иметь как обычный текст, так и поле ввода и играть с show / hide в js?

Answer 1

Вы можете назначить псевдоселекторы ::before или ::after для <input>, но это работает только в Chrome.Единственный разумный выбор - это дополнительные <span>.

Answer 2

Это не идеально, но мне удалось заставить что-то работать в качестве доказательства концепции, обратите внимание, что для значка используется FontAwesome.

https://codepen.io/martincarlin87/pen/GaQmxe

HTML

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

JS

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`;
  }
}

вычисление левой позиции требует немного работы, может быть проще просто использовать длину значения вместо позиции каретки.

Сначала я попробовал псевдоэлемент, но он не может быть добавлен к входам, следовательно, к контейнеру div, но затем оказывается, что вы не можете легко изменить их стили с помощью JavaScript, поэтому вместо этого применил элемент span.