Нужно зделать широкий текстовый курсор в input type=text и чтобы при перемещении его назад он становился под буквой, а та окрашивалась в контрастный цвет. Интернет весь перерыл, сам наделал кучу полурабочих костылей. Теперь пишу сюда, может кто-то с подобной проблемой сталкивался и терпения у него было по более... Можно и с jQuery, мне уже фиолетово да и времени нет...
Ответ
Написал решение сам, может кому пригодится:
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;
}
Комментариев нет:
Отправить комментарий