Как сделать широкий текстовый курсор в input type=text

#javascript #html #jquery

Нужно зделать широкий текстовый курсор в input type=text и чтобы при перемещении
его назад он становился под буквой, а та окрашивалась в контрастный цвет. Интернет
весь перерыл, сам наделал кучу полурабочих костылей. Теперь пишу сюда, может кто-то
с подобной проблемой сталкивался и терпения у него было по более... Можно и с jQuery,
мне уже фиолетово да и времени нет...
    

Ответы

Ответ 1

Как-то так (надо бы проверку на всякие модификаторы добавить):



function updateSelection(event) {
  var inp = event.target;
  
  if (inp.selectionStart === inp.selectionEnd) {
    ++inp.selectionEnd;
  }
}

var inp = document.querySelector('input');

inp.addEventListener('input', updateSelection);
inp.addEventListener('keyup', updateSelection);
inp.addEventListener('click', updateSelection);

inp.addEventListener('keydown', function (event) {
  var inp = event.target;

  if (event.keyCode === 37 && inp.selectionStart+1 === inp.selectionEnd) { // Left
    --inp.selectionEnd;
  }
});
input {
  font-family: monospace;
}

::selection {
  background: black;
  color: white;
}



Ответ 2

Написал решение сам, может кому пригодится:



var txt = document.getElementById('text');
var wrp = document.getElementById('wrapper');

wrp.onclick = function() {
  txt.focus();
}

setInterval(function() {
  var pos = getCursorPosition(txt);
  var val = txt.value;
  var symb;
  if (typeof val[pos] == "undefined" || val[pos] == " ") symb = " ";
  else symb = val[pos];
  var curs = "" + symb + "";
  var p1 = val.slice(0, pos);
  var p2 = val.slice(pos + 1, val.lenght);
  wrp.innerHTML = p1.replace(/ /g, " ") + curs + p2.replace(/ /g, " ");

  wrp.style.top = (txt.getBoundingClientRect().top + txt.offsetTop + 3) + "px";
  wrp.style.left = (txt.getBoundingClientRect().left + txt.offsetLeft + 2) + "px";

  txt.style.width = parseInt(document.defaultView.getComputedStyle(wrp).width, 10)
+ 10 + "px";
}, 10);

function getCursorPosition(ctrl) {
  var caretPos = 0;
  if (document.selection) {
    ctrl.focus();
    var sel = document.selection.createRange();
    sel.moveStart('character', -ctrl.value.length);
    caretPos = sel.text.length;
  } else if (ctrl.selectionStart || ctrl.selectionStart == '0') {
    caretPos = ctrl.selectionStart;
  }
  return caretPos;
}
#text {
  font-family: monospace;
  color: transparent;
}

#wrapper {
  font-family: monospace;
  position: absolute;
  min-width: 150px;
}