Как получить позицию курсора в поле ввода в событии onmousedown - PullRequest
Новая
       92

Как получить позицию курсора в поле ввода в событии onmousedown

0 голосов
/ 21 декабря 2018

Я разрабатываю поле формы выбора даты, которое открывает календарь для события onmousedown.Один из поддерживаемых форматов - «гггг / мм / дд», и в зависимости от того, где пользователь щелкнул (поле «гггг», «мм или дд»), можно выбрать годы, месяцы или дни на выбор.Проблема в том, что selectionStart не установлен правильно в событии onmousedown, поэтому я не могу открыть поле правильно.Положение курсора устанавливается, по-видимому, в браузерном действии «по умолчанию», которое выполняется после события mousedown (после всего всплывающего сообщения).

Возможные решения:

  • Переместить логику открытия поля в событие onclick (влияет на взаимодействие с пользователем, когда поле начинает открываться позже)
  • Используйте setTimeout для задержки логики открытия поля (в крайнем случае)
  • Запретить действие onmousedown по умолчанию и вручную установить позицию курсора, вычисленную из координат пикселей (только для h4x0rs)
  • Запустить логику открытия после действия onmousedown по умолчанию (я понятия не имею,как)

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

Упрощенный код javascript: 

var getCursor = function() {       
  // Initialize
  var iCaretPos = 0;

  // IE
  if(document.selection) {
    var oSel = document.selection.createRange();
    oSel.moveStart('character', -this.value.length);
    iCaretPos = oSel.text.length;
  }
  // Others
  else if (this.selectionStart || this.selectionStart == '0') {
    iCaretPos = this.selectionStart;   
  }

  return iCaretPos;
}  

var openMenu = function(cursor) {
  //do stuff based on cursor position

}

var field = document.getElementById('test');

field.onmousedown = function(e) {
  //this does not return correct cursor position 
  //as cursor position is set in browser default action
  //after onmousedown finished bubbling
  var cursor = getCursor.call(this);

  openMenu(cursor);

}

Код HTML: 

<input type='text' id='test' >
...