单击元素时聚焦输入字段，除非容器中的某些文本突出显示

Question

单击容器元素时需要聚焦输入字段 #chatInput #text 除非该元素内的文本（通过双击或鼠标选择突出显示）

// what I got so far which is incomplete
$('#text').on('click', function (e) {
  $('#chatInput').focus();
});

Fiddle: https://jsfiddle.net/xhykmtwy/4/

Answer 1

比我最初认为的解决方案要长一点，但这是我得到的：

var mouseDownStart = 0,
    lastKeyupTime = 0;

function processKeyDown() {
  if (!mouseDownStart) {
    mouseDownStart = Date.now();
  }
}

function processKeyUp() {
  var now = Date.now(),
      isDoubleClick = lastKeyupTime && now - lastKeyupTime < 500;
      isHighliting = now - mouseDownStart > 150

  lastKeyupTime = now;
  mouseDownStart = 0;

  return {
    isDoubleClick: isDoubleClick,
    isHighliting: isHighliting
  }
}

$('#text').on('mousedown', function (e) {
  processKeyDown();
});


$('#text').on('mouseup', function (e) {
  var data = processKeyUp();
  if (data.isDoubleClick || data.isHighliting) return;
  $('#chatInput').focus();
});

已更新 fiddle：https://jsfiddle.net/xhykmtwy/1/

Answer 2

您可能需要考虑以下解决方案，该解决方案检查点击事件后 text 元素中是否 select 编辑了某些文本：

$('#text').click(function () {
    var container = this;
    setTimeout(function () {
        var selectedElement = null;
        var selectedText = null;
        if (window.getSelection) {
            // For modern browsers
            var selection = window.getSelection();
            if (selection) {
                selectedText = selection.toString();
                if (selection.anchorNode) {
                    selectedElement = selection.anchorNode.parentNode;
                }
            }
        }
        else if (document.selection && document.selection.type === "Text") {
            // For IE < 9
            var selection = document.selection;
            selectedText = selection.createRange().text;
        }
        if (!(selectedText && selectedText.length > 0) || (selectedElement !== container && !$(container).has(selectedElement))) {
            setTimeout(function () { $('#chatInput').focus(); }, 0);
        }
    }, 0);
});

根据我的测试，它适用于 IE（包括 IE7）、Firefox 和 Chrome。唯一的例外是在 IE 中双击，它没有 select 文本。您可以在 jsfiddle.

中看到结果

对 setTimeout 的调用确保所有 selection 处理都已完成，尤其是在单击 selected 文本将其删除select 时。

学分：

我使用了Eineki 在How can I get the element in which highlighted text is in? 中提出的方法来检查text 元素是否包含selected 文本。
在 IE < 9 中处理 selection 的代码是在 Tim Down 对 post Get the Highlighted/Selected text.
[ 的回答中找到的=32=]

单击元素时聚焦输入字段，除非容器中的某些文本突出显示

Focus an input field when clicking on an element, except if some text within the container was highlighted

javascript

jquery

mouseevent

jquery-events