Issue with selecting text using keys jquery

Question

I need to highlight the selected text in a div using keys and mouse. Approach for select using mouse is as follows:

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
    }

This is working fine for mouse double click. But for using keys this not working as expected. Because I need to make this functionality accessible to visually impaired people. I tried with keypress and keydown to select the text using keys. But with the .word class it is not returning the object "this". Please someone suggest a solution for this. Thank you

Zenoo · Answer 1 · 2018-02-26T10:57:22.147

Why not just toggle a class on dblclick ?

I also added a handler for left & right arrow keys combined with the shift key.

It checks e.keyCode for the left & right arrow values 37 or 39.

Then it checks e.shiftKey to see if shift is pressed.

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

Hi Zenoo, Thank you. This is working fine for mouse double click. But for using keys this not working as expected. Because I need to make this functionality accessible to visually impaired people. — Anushka, Feb 26 '18 at 10:37
Thanks for the update. But I need to select multiple words at the same time using shift and arrow keys. — Anushka, Feb 26 '18 at 10:54
Thank you for the help. Still there is an issue. This should be highlighted with the cursor point. Otherwise screen readers are not reading the word. In your code the text is highlighting with keys. But cursor is not moving with the keys. — Anushka, Feb 26 '18 at 11:09

score 0 · Answer 2 · answered Feb 26 '18 at 10:32

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

<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>

Hi, This is working fine for mouse double click. But for using keys this not working as expected. Because I need to make this functionality accessible to visually impaired people. — Anushka, Feb 26 '18 at 10:37

Issue with selecting text using keys jquery

2 Answers2