Получение разрывов строк в текстовой области - PullRequest
Новая
       18

Получение разрывов строк в текстовой области

0 голосов
/ 01 мая 2018

Я хочу создать механизм опережающего ввода для электронной почты в текстовой области.

Если я наберу текстовую область, элемент управления автоматически обернет текст в слова, поэтому мне нужно знать, где находится курсор в данный момент (то есть его положение x, y), зависит от того, где происходят эти разрывы строк. (Позиция выбора определяется количеством символов от начала курсора.)

Мне нужна позиция x any y, чтобы я мог расположить список возможных дополнений под курсором.

Есть ли способ извлечь эту информацию о разрыве строки из элемента управления, или мне нужно изменить ее и выполнить алгоритм «накатить свой собственный» обтекания текстом (что сложно, так как измерить ширину текста непросто) в JavaScript.)

Любая помощь будет оценена.

1 Ответ

0 голосов
/ 01 мая 2018

Собираем все вместе с помощью jQuery. Дайте мне знать, если вам нужен блок JavaScript. 

$(function() {
  var textProps = [0, 0];
  $("textarea.allow-overflow").keyup(function(e) {
    var self = $(this);
    var text_width = $(".hidden").text(self.val()).css({
      'font-weight': self.css("font-weight"),
      'font-size': self.css("font-size"),
      'font-family': self.css("font-family"),
      'white-space': 'nowrap',
      'position': 'absolute',
      'display': 'block',
      'width': 'auto'
    }).hide().width();
    textProps[0] = $(".hidden").width();
    textProps[1] = $(".hidden").height();
    var overflows = text_width > self.width();
    var lines = 1;
    if (overflows) {
      lines = Math.floor(self.prop("scrollHeight") / $(".hidden").height());
      textProps[0] = textProps[0] - (self.width() * (lines - 1));
      textProps[1] = $(".hidden").height() * lines;
    }
    $(".report").html("X (Left): " + textProps[0] + "px, Y (Top): " + textProps[1] + "px, Wrap: " + overflows.toString() + ", Lines: " + lines);
  });
});
.widget label {
  display: block;
}

.widget .allow-overflow,
.report {
  width: 240px;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 13px;
  font-weight: 400;
}

.report {
  border: 1px dashed #ccc;
  font-size: 9px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="widget">
  <label>Type in me</label>
  <textarea class="allow-overflow"></textarea>
</div>
<div class="report">&nbsp;</div>
<div class="hidden"></div>

Нам нужно знать несколько вещей.

  1. Когда мы переполнились и переносим текстовое поле.
  2. Ширина и свойства шрифта текстового поля
  3. Высота строки текста

Затем мы можем вычислить текущую позицию курсора из [X (Left), Y (Top)] текстового поля. Когда мы вводим текст, он увеличивает width и height скрытого div.

В первой строке это просто, x = width и y = height. После того, как мы завернули, нам нужно вычислить смещение и количество строк. 

number of lines = floor( text box scroll height / hidden height )
x pos on line = hidden width - (width of text box * number of lines)
y pos = line height * number of lines

Вы можете вставить это в функцию и очистить полученные данные в массив или объект.

Если вы разрешите изменение размера, мы не можем рассчитывать на статическую ширину и высоту текстового поля. Итак, для моего примера я каждый раз беру эту деталь.

Надеюсь, это поможет.

...