Question

我需要使用键和鼠标突出显示div中的选定文本。使用鼠标选择的方法如下：

html code:

 <div id="passage_response" contenteditable="true">
       <span class="word" num="0"> In </span>
       <span class="word" num="1"> this </span>
       <span class="word" num="2"> bug, </span>
       <span class="word" num="3"> issue </span>
       <span class="word" num="4"> no </span>
       <span class="word" num="5"> 1 </span>
       <span class="word" num="6"> explains </span>
    </div>

jquery:

    $('#passage_response .word').bind('dblclick', function() {
        toggleHighlight(this);
    });
    function toggleHighlight(target) {
        //highlighting functionality here
    }

这适用于鼠标双击。但是使用键不能按预期工作。因为我需要让视障人士可以使用此功能。我尝试使用keypress和keydown来使用键选择文本。但是使用.word类它不会返回对象＆＃34;这个＆＃34;。请有人为此建议解决方案。谢谢

Answer 1

为什么不只是toggle dblclick上的课程？

我还为左和右添加了一个处理程序右arrow keys与shift key相结合。

检查e.keyCode左侧＆amp;右箭头值37或39。

然后检查e.shiftKey以查看是否按下shift。

$('#passage_response .word').on('dblclick', function() {
  $('.word').removeClass('highlight');
  $(this).addClass('highlight');
});

$(document).on('keyup',function(e){
  e = e || window.event;
  switch(e.keyCode){
    case 37: //LEFT ARROW
      if($('.word.highlight').length){
        if(e.shiftKey){ //SHIFT + LEFT
          $('.word.highlight').last().removeClass('highlight');
        }else{ //LEFT ONLY
          $('.word.highlight').removeClass('highlight').prev('.word').addClass('highlight');
        }
      }else{
        $('.word').eq(0).addClass('highlight');
      }
      break;
    case 39: //RIGHT ARROW
      if($('.word.highlight').length){
        if(e.shiftKey){ //RIGHT + SHIFT
          $('.word.highlight').last().next('.word').addClass('highlight');
        }else{ //RIGHT ONLY
          $('.word.highlight').removeClass('highlight').next('.word').addClass('highlight');
        }
      }else{
        $('.word').eq(0).addClass('highlight');
      }
      break;
  }
});

.highlight{
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="passage_response" contenteditable="true">
  <span class="word" num="0"> In </span>
  <span class="word" num="1"> this </span>
  <span class="word" num="2"> bug, </span>
  <span class="word" num="3"> issue </span>
  <span class="word" num="4"> no </span>
  <span class="word" num="5"> 1 </span>
  <span class="word" num="6"> explains </span>
</div>

Answer 2

＆＃13;

$('#passage_response .word').bind('dblclick', function() {
       $(this).css({"color":"blue"});
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="passage_response" contenteditable="true">
       <span class="word" num="0"> In </span>
       <span class="word" num="1"> this </span>
       <span class="word" num="2"> bug, </span>
       <span class="word" num="3"> issue </span>
       <span class="word" num="4"> no </span>
       <span class="word" num="5"> 1 </span>
       <span class="word" num="6"> explains </span>
    </div>

＆＃13;

使用密钥jquery

2 个答案: