Узнать пиксельную позицию символа в div.contenteditable

#javascript #jquery

Суть в следующем, допустим этот текст находится в div - 

привет привет привет 
привет @привет привет


как узнать позицию от левого верхнего угла div-a, top и left знака "@" в пикселях?
    

Ответы

Ответ 1

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

При клике так же проверять координаты курсора и вычислять нужно ли показывать попап.

В примере ниже попап показывается, если курсор не далее чем в 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;
}


  
123
  
234
  
345
  
456
  
567



Ответ 2

Решением в лоб может быть оборачивание символа @ например в span и взятие его смещения. 



document.getElementById('btn').addEventListener('click', function() {
  var editor = document.querySelector("[contenteditable]");
  var html = editor.innerHTML;
  editor.innerHTML = html.replace(/@/, "$&");
  document.getElementById('coord').innerHTML = document.querySelector('span').offsetLeft
+ ' ' + document.querySelector('span').offsetTop;
  editor.innerHTML = html
});
[contenteditable] {
  position: relative;
}

  привет привет привет привет @привет привет





Ответ 3

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


    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur excepturi
laudantium nihil officia totam. @Distinctio dolorem earum fugiat hic illum maiores
natus perferendis possimus quod similique sint, temporibus voluptas voluptatum?