Суть в следующем, допустим этот текст находится в div -
привет привет привет
привет @привет привет
как узнать позицию от левого верхнего угла div-a, top и left знака "@" в пикселях?
Ответ
На основе ответа на английский вопрос можно узнавать текущее положение курсора, при вводе проверять что именно ввели, если ввели нужны символ - получать координаты курсора и показывать по ним попап.
При клике так же проверять координаты курсора и вычислять нужно ли показывать попап.
В примере ниже попап показывается, если курсор не далее чем в 5 позициях правее символа @
Пример очень простой, и возможно потребует доработок для использования.
var popup = document.querySelector('#popup');
function getCurrentRange() {
var range = window.getSelection().getRangeAt(0).cloneRange();
range.setStart(range.startContainer, Math.max(0, range.startOffset - 1));
return range;
}
function showPopupAt(range, distance) {
range.setStart(range.startContainer, Math.max(0, range.startOffset - (distance || 0)));
range.setEnd(range.startContainer, range.startOffset + 1);
var rect = range.getBoundingClientRect();
popup.style.display = 'block';
popup.style.left = rect.left + 'px';
popup.style.top = rect.bottom + 'px';
}
function hidePopup() {
popup.style.display = 'none';
}
function toggleByDistance(range) {
var prev = range.startContainer.textContent.lastIndexOf('@', range.startOffset);
var distance = prev != -1 ? range.startOffset - prev : -1;
if (distance < 0 || distance > 5) { //for example
hidePopup();
} else {
showPopupAt(range, distance);
}
}
document.querySelector('[contenteditable]').addEventListener('keyup', function(e) {
var range = getCurrentRange()
if (e.key == '@') {
showPopupAt(range);
} else {
toggleByDistance(range);
}
});
document.querySelector('[contenteditable]').addEventListener('click', function(e) {
toggleByDistance(getCurrentRange());
});
[contenteditable] {
border: 1px solid lightgray;
width: 200px;
height: 200px;
word-wrap: break-word;
white-space: pre-wrap;
}
#popup {
display: none;
position: absolute;
border: 1px solid lightgray;
box-shadow: 2px 2px 3px lightgray;
left: 0;
top: 0;
background-color: white;
}
Комментариев нет:
Отправить комментарий