Javascript 单击元素时聚焦输入字段，除非容器中的某些文本高亮显示_Javascript_Jquery_Mouseevent_Jquery Events

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

javascript jquery

Javascript 单击元素时聚焦输入字段，除非容器中的某些文本高亮显示,javascript,jquery,mouseevent,jquery-events,Javascript,Jquery,Mouseevent,Jquery Events,当单击容器元素时，需要聚焦输入字段#chatInput，除非该元素中的文本已高亮显示（通过双击或鼠标选择） Fiddle:比我最初认为的解决方案要长一点，但我得到的是： var mouseDownStart = 0, lastKeyupTime = 0; function processKeyDown() { if (!mouseDownStart) { mouseDownStart = Date.now(); } } function processKeyUp()

当单击容器元素时，需要聚焦输入字段

#chatInput

，除非该元素中的文本已高亮显示（通过双击或鼠标选择）

Fiddle:

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

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();
});

var mouseDownStart=0，
lastKeyupTime=0；
函数processKeyDown（）{
如果（！mouseDownStart）{
mouseDownStart=Date.now（）；
}
}
函数processKeyUp（）{
var now=Date.now（），
isDoubleClick=lastKeyupTime&&now-lastKeyupTime<500；
isHighliting=现在-鼠标向下开始>150
lastKeyupTime=现在；
mouseDownStart=0；
返回{
isDoubleClick:isDoubleClick，
石丽亭：石丽亭
}
}
$（'#text'）。on（'mousedown'，函数（e）{
processKeyDown（）；
});
$（'#text'）。关于（'mouseup'，函数（e）{
var data=processKeyUp（）；
如果（data.isDoubleClick | | data.isHighliting）返回；
$（'#chatInput'）.focus（）；
});

更新的fiddle:

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

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();
});

var mouseDownStart=0，
lastKeyupTime=0；
函数processKeyDown（）{
如果（！mouseDownStart）{
mouseDownStart=Date.now（）；
}
}
函数processKeyUp（）{
var now=Date.now（），
isDoubleClick=lastKeyupTime&&now-lastKeyupTime<500；
isHighliting=现在-鼠标向下开始>150
lastKeyupTime=现在；
mouseDownStart=0；
返回{
isDoubleClick:isDoubleClick，
石丽亭：石丽亭
}
}
$（'#text'）。on（'mousedown'，函数（e）{
processKeyDown（）；
});
$（'#text'）。关于（'mouseup'，函数（e）{
var data=processKeyUp（）；
如果（data.isDoubleClick | | data.isHighliting）返回；
$（'#chatInput'）.focus（）；
});

更新小提琴：

您可能想考虑下面的解决方案，它检查在单击事件之后，在<代码>文本< /代码>元素中是否选择了一些文本：

$('#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);
});

$（'#text'）。单击（函数（）{
var容器=这个；
setTimeout（函数（）{
var selectedElement=null；
var selectedText=null；
if（window.getSelection）{
//适用于现代浏览器
var selection=window.getSelection（）；
如果（选择）{
selectedText=selection.toString（）；
if（选择.锚定节点）{
selectedElement=selection.anchorNode.parentNode；
}
}
}
else if（document.selection&&document.selection.type==“Text”）{
//对于IE<9
var选择=document.selection；
selectedText=selection.createRange（）.text；
}
如果（！（selectedText&&selectedText.length>0）| |（selectedElement！==container&&！$（container）.has（selectedElement）））{
setTimeout（函数（）{$（'#chatInput'）.focus（）；}，0）；
}
}, 0);
});

根据我的测试，它可以在IE（包括IE7）、Firefox和Chrome中使用。唯一的例外是IE中的双击，它不选择文本。你可以从中看到结果

调用

setTimeout

可确保所有选择处理都已完成，尤其是在单击所选文本以取消选择时

学分：

我使用了年Eineki提出的方法来检查

text

元素是否包含所选文本

在Tim Down对帖子的回答中找到了处理IE<9中选择的代码