检查是否选择了ul中的任何文本

Question

我正在编写一个日志消息框/与聊天功能相同的功能，一旦有人在聊天内部选择文本（如果用户想要粘贴某些内容），我想将我的AutoScrollDown布尔值设置为false。

我实现了带有ul和lis的日志消息/聊天框，如下所示：

<ul id="1" class="logbox">
   <li class="debug"><b>At</b> w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.learn how to make a website. We offer free tutorials in all web development technologies.</li>
   <li class="error"><b>At</b> w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.</li>
   <li class="warning"><b>At</b> w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.</li>
   <li>blabla</li>
</ul>

我已经尝试过以下事件来检查我的ul中的内容是否被选中，这是不起作用的：

  $("#1").on("focus", function() {
    autoScrollEnabled = 0;
  });

  $("#1").off("focus", function() {
    autoScrollEnabled = 1;
  });

我的问题： 一旦有人选择/突出显示我的文本内部的文本，如何将autoScrollEnabled设置为0，如何检查用户是否已停止选择/突出显示任何文本。

Answer 1

此代码段演示了：

  

一个。它可以检测带有或不带表格输入的文本选择。

     

B中。将触发mouseup事件并充分处理误报，例如点击的文字，但没有突出显示。

1. 委托整个文件听取mouseup事件。

2. 接下来用：

   定义布尔状态

   一个。条件1（需要为真）：选择对象存在

     只要任何文本是event.target（即点击，鼠标，放屁等），

   *选择就为真。

   湾条件2（需要不折叠）：选择不只是单击文本（即没有突出显示）

     

   *通过使用属性.isCollapsed，我们知道如果选择的起点与选择的结束点相同，则.isCollapsed为真，因此没有突出显示文本。< / p>

3. 由于从未解释过autoscroll，我将其简化为警报。

   一个。如果禁用autoScroll，则警报还将包含所选文本。

段

＆＃13;
＆＃13;
/*
This Snippet demonstrates that:
   A. It can detect the selection of text with or without form inputs.
   B. Will trigger on mouseup event and adequately handle false positives like text clicked but nothing highlighted.
*/

// Reference a selection object
var selection = window.getSelection();

/*
1. Delegate the whole document to listen for a mouseup event.

2. Next define the boolean state with:

  a. Condition 1 (needs to be true): That a selection object exists
  
     ＊ selection is true as soon as any text is the event.target (i.e. clicked, mouseup, farted on, etc.)
  b. Condition 2 (needs to be not collapsed): That the selection is not just a single click on text (i.e. nothing highlighted)
  
     ＊ By using the property .isCollapsed we know that if the starting point of a selection is the same as the ending point of a selection, then .isCollapsed is true and therefore no text was highlighted.
     
3. Since autoscroll was never explained, I have simplified it as an alert.

   a. If autoScroll is disabled, the alert will also contain the text that's selected. 
*/

$(document).on('mouseup', function(e) {
  var state = (selection && !selection.isCollapsed) ? alert('autoScroll is disabled {{' + selection + '}} is selected') : alert('autoScroll is still enabled');
  return state;
});
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul id="list1" class="logbox">
  <li class="debug"><b>At</b> w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.learn how to make a website. We offer free tutorials in all web development technologies.</li>
  <li class="error"><b>At</b> w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.</li>
  <li class="warning"><b>At</b> w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.</li>
  <li>blabla</li>
</ul>
＆＃13;
＆＃13;
＆＃13;

参考

• Selection API

  • window.getSelection()

  • .isCollapsed

Answer 2

li个元素没有focus个事件，但可以欺骗。请参阅以下摘录。

＆＃13;

＆＃13;

var autoScrollOn = 1; //declare globally
var timeoutHandle = 0; //for additional service
$('#ul1').on('click', 'li', function() { //delegate click event
  clearTimeout(timeoutHandle); //clear timeout if any
  if ($(this).hasClass('selected')) { 
    //remove selection on the second click
    $('#ul1 li').removeClass('selected');
    autoScrollOn = 0;
  } else {
    //remove selection from siblings
    $('#ul1 li').removeClass('selected');
    //and add to the clicked element
    $(this).addClass('selected');
    autoScrollOn = 1;
    //restore autoscroll after 10s
    timeoutHandle = setTimeout(function() {
      $('#ul1 li').removeClass('selected');
      autoScrollOn = 0;
      console.log(autoScrollOn);
    }, 10000);
  }
  //do whatever you want with autoscroll
  console.log(autoScrollOn);
});

＆＃13;

.debug {
  background: #aaf;
}
.error {
  background: #faa;
}
.warning {
  background: #ffa;
}
.selected {
  border: solid 1px #f00;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="ul1" class="logbox">
  <li class="debug"><b>At</b> w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.learn how to make a website. We offer free tutorials in all web development technologies.</li>
  <li class="error"><b>At</b> w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.</li>
  <li class="warning"><b>At</b> w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.</li>
  <li>blabla</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 3

要检测用户是否在日志框中突出显示文字，您应首先听取mousedown事件，然后在鼠标仍处于关闭状态时查看是否有mousemove个事件。您可以在鼠标按下或鼠标移动时将标记设置为false，然后在mouseup事件中重置它。

＆＃13;

＆＃13;

document.querySelector('#one').addEventListener('mousedown', function (event) {

  window.onmousemove = function (event) {
    console.log('the user is selecting text');
  }
  
  window.onmouseup = function (event) {
    console.log('the user mousedup');
    console.log(window.getSelection());
    autoScrollEnabled = 1;
    window.onmousemove = null;
    window.onmouseup = null;
  }
  
  console.log('user mouseddown in ' + event.target.nodeName);
  autoScrollEnabled = 0;
}, false);

＆＃13;

<ul id="one" class="logbox">
   <li class="debug"><b>At</b> w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.learn how to make a website. We offer free tutorials in all web development technologies.</li>
   <li class="error"><b>At</b> w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.</li>
   <li class="warning"><b>At</b> w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.</li>
   <li>blabla</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 4

<script type="text/javascript">
    var mouseIsDown         = false,
        autoScrollEnabled   = 1;
        userSelection       = '';

    $.fn.doIt = function () {
        if (!window.getSelection().isCollapsed) {
            var range1 = window.getSelection().getRangeAt(0),
                range2 = range1.cloneRange();

            range2.selectNodeContents(this[0]);
            range2.setStart(range1.startContainer, range1.startOffset);
            range2.setEnd(range1.endContainer, range1.endOffset);
            userSelection = range2.toString();
            console.log(userSelection);

            if (userSelection != '')
                autoScrollEnabled = 0;
            else
                autoScrollEnabled = 1;
        } else
              autoScrollEnabled = 1;
    };

    $('.logbox').mousedown(function(event) {
        $(this).parent().delegate('ul.logbox', 'mousemove', function(event) {
            if (!mouseIsDown) return;
            $(this).doIt();
        });
        mouseIsDown = true;
    }).dblclick(function(event) {
        $(this).doIt();
    });

    $(window).mouseup(function(event) {
        mouseIsDown = false;
        $('.logbox').parent().undelegate('ul.logbox', 'mousemove');
    })
</script>

Answer 5

您需要将一些表单字段合并到日志消息应用程序中，这样您就可以使用焦点和模糊等jQuery方法，并进行事件驱动编程。他们通常不会像li一样处理原始文本。