Страницы

Поиск по вопросам

среда, 22 января 2020 г.

Как сделать широкий текстовый курсор в 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; }

Комментариев нет:

Отправить комментарий