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
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>
$('#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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.