4

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

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

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

11
  • а зачем это нужно?
    – Grundy
    30 июл 2016 в 9:16
  • В принципе, повторение facebook реализации ссылки на юзера, упоминание о юзере в комментарии
    – sivik_xes
    30 июл 2016 в 21:44
  • Вопрос уже обсуждался на stackoverflow: stackoverflow.com/a/23526970/1941460, реализация работает без доп. обертки в span. 1 авг 2016 в 13:49
  • @Павел Азанов Немного не то, подобную реализацию уже делал, вопрос в том что бы реализовать не перемещая каретку, пользователь поставил "@" и пишет за ней - "Иван В" и под "@" появляется autocomlete по совпадениям - подобное уже есть на fb.com
    – sivik_xes
    1 авг 2016 в 13:57
  • @sivik_xes, на самом деле перемещать каретку не обязательно, при наборе @ каретка стоит в нужном месте, запоминаются ее координаты минус ширина символ @. Как-то так
    – Grundy
    1 авг 2016 в 14:17

3 ответа 3

8

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

document.getElementById('btn').addEventListener('click', function() {
  var editor = document.querySelector("[contenteditable]");
  var html = editor.innerHTML;
  editor.innerHTML = html.replace(/@/, "<span>$&</span>");
  document.getElementById('coord').innerHTML = document.querySelector('span').offsetLeft + ' ' + document.querySelector('span').offsetTop;
  editor.innerHTML = html
});
[contenteditable] {
  position: relative;
}
<div contenteditable>
  привет привет привет привет @привет привет
</div>
<input type="button" id="btn" value="GetCoord" />
<div id="coord"></div>

7
  • span явно лишний, с таким же успехом можно было бы поставить курсор перед @, считать позицию, и после этого вернуть курсор на место, снова таки несколько действий, а хотелось бы как можно легче реализацию
    – sivik_xes
    30 июл 2016 в 21:47
  • @sivik_xes, да, как вариант, по другому сделать не получится, текст не рассматривается как самостоятельная единица в скрипте, поэтому нельзя узнать простым запросом например координаты третьего символа во второй строке в тексте элемента. То есть в любом случае будут либо расчеты, либо незаметное оборачивание и разворачивание и получения координаты конкретного элемента, а не символа в тексте
    – Grundy
    1 авг 2016 в 12:07
  • в таком случае даже не знаю, мне не верится, что нельзя, буду по возможности дальше копать.
    – sivik_xes
    1 авг 2016 в 13:58
  • @sivik_xes а надо верить =) 5 авг 2016 в 8:02
  • @Василий Барбашев очень позитивный настрой, нужно верить что есть что-то невозможное), еще скажите, что нельзя убрать желтый background при автозаполнении в chrome)
    – sivik_xes
    5 авг 2016 в 8:26
2
+100

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

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

В примере ниже попап показывается, если курсор не далее чем в 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;
}
<div contenteditable></div>
<div id="popup">
  <div>123</div>
  <div>234</div>
  <div>345</div>
  <div>456</div>
  <div>567</div>
</div>

2
  • Условия отображения у меня немного другие, но тем не менее смогу поправить этот код под свои нужды, огромное Спасибо!
    – sivik_xes
    5 авг 2016 в 12:12
  • Красота, великолепно) 5 авг 2016 в 12:13
0

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

<div class="content">
    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?
</div>

<script>
    var contentEl = document.querySelector('.content');

    var textEl      = contentEl.childNodes[0];
    var textContent = textEl.textContent;
    var index       = textContent.indexOf('@');

    var range = document.createRange();
    range.setStart(textEl, index);
    range.setEnd(textEl, index + 1);

    var rects  = range.getClientRects();
    var offset = {
        top: rects[0].top - contentEl.offsetTop,
        left: rects[0].left - contentEl.offsetLeft
    };

    console.log(offset);
</script>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.