Question

我有几个具有相同类名的输入框。我希望能够获得当前突出显示的文本，并确切地知道文本所在的输入框。我当前的方法如下：

 $(document).on("mouseup", ".element", function(){
    var text = "";
    var activeEl = document.activeElement;
    var activeElTagName = activeEl ? activeEl.tagName.toLowerCase() : null;
    if (
    (activeElTagName == "textarea") || (activeElTagName == "input" &&
    /^(?:text|search|password|tel|url)$/i.test(activeEl.type)) &&
    (typeof activeEl.selectionStart == "number")
    ) {
        text = activeEl.value.slice(activeEl.selectionStart, activeEl.selectionEnd);
    } else if (window.getSelection) {
        text = window.getSelection().toString();
   }
});

这为我提供了当前的文本选择，我可以调用$(this)来访问突出显示的文本所在的元素。

我当前的方法存在的问题是，如果你开始点击然后在文本框外拖动，比如说在文本框的左边缘之外，你会在框内突出显示文本但是事件将不会注册，因为鼠标单击结束在输入字段的范围之外。我该如何解决这个问题？

Answer 1

您可以将多个事件绑定到处理程序所以只需绑定mouseleave！

$(document).on("mouseup mouseleave", ".element", function(){

Answer 2

您可以在输入框中使用onselect事件。选择文本时，将重新注册onselect事件。之后，您可以找到突出显示文本的起点和突出显示文本的结束点。

请参阅下面的代码段

$(".boxes").on('select', function() {
  if (window.getSelection) {
    text = window.getSelection().toString();
    var start_index = this.selectionStart;
    var end_index = this.selectionEnd;
    console.log(this.value.substr(start_index, end_index));
  }
}) //end mouseover

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="in1" class="boxes">
<input id="in1" class="boxes">
<input id="in1" class="boxes">
<input id="in1" class="boxes">
<input id="in1" class="boxes">

Answer 3

您可以在事件处理程序范围之外设置类似isMouseDown的变量，如下所示：

var isMouseDown = false;

$(document).on("mousedown", ".element", function(){
  isMouseDown = true;
});

$(document).on("mouseup", document, function(){
  if (isMouseDown) {
    var text = "";
    var activeEl = document.activeElement;
    var activeElTagName = activeEl ? activeEl.tagName.toLowerCase() : null;
    if (
    (activeElTagName == "textarea") || (activeElTagName == "input" &&
    /^(?:text|search|password|tel|url)$/i.test(activeEl.type)) &&
    (typeof activeEl.selectionStart == "number")
    ) {
        text = activeEl.value.slice(activeEl.selectionStart, activeEl.selectionEnd);
    } else if (window.getSelection()) {
        text = window.getSelection().toString();
    }
  }
  isMouseDown = false;
});

jQuery - 在输入字段中获取当前文本选择

3 个答案: