Question

我正在开发日期选择器表单域，该域在onmousedown事件上打开日历。受支持的格式之一是“ yyyy / mm / dd”，并且取决于用户单击的位置（在yyyy或mm或dd部分上），字段打开的年数或年数可供选择。问题是onmousedown事件中的selectionStart设置不正确，因此我无法正确打开字段。光标位置显然是在“默认”浏览器操作中设置的，该操作在mousedown事件（所有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' >

如何在onmousedown事件中获取光标在输入字段上的位置

0 个答案: