CODEWITHSUNDEEP
jqueryhtml
user3683976
user3683976

Reputation: 121

How to remove highlight on Delete key

I have a search highlight that I have created, but for some reason its not removing the search highlight when the backspace or delete key is hit. I was able to get the event to work when "Enter" key is hit but for some reason its not working when the delete or backspace key is hit. Below is my code:

<script>
$input.keypress("input", function(e) {
if (e.keyCode === 13) {  
var searchVal = this.value;
$content.unmark({
  done: function(totalMatches) {
    $content.mark(searchVal, {
      separateWordSearch: false,
      acrossElements: true,
      done: function(totalMatches) {
        $results = $content.find("mark");
        currentIndex = 0;
        jumpTo();

            //tag.addClass('active');
        totalCount=totalMatches;
            if (totalMatches) {

          variableCounter=1;
          $(".kwt-count").html(variableCounter+ " of " +totalMatches+" Matches");
            }
        else
        {
           $(".kwt-count").html(" Matches");
        }

      }
    });
  }
});
}
}); 

  /**
   * Clears the search
   */
  $clearBtn.keypress("click", function(e) {
    if (e.keyCode === 8 || e.keyCode === 46) {
    $content.unmark();
    $input.val("").focus();
    }
  });
</script>

I have created a codepen of the code here: https://codepen.io/dude12go8/pen/PoYbdXd

I am not sure what I am doing wrong here. Thank you in advance

Upvotes: 0

Views: 142

Answers (1)

Christopher Anderson
Christopher Anderson

Reputation: 101

Your code only runs when you hit the enter key.

The keycode's for backspace and delete are 46 and 8. Update your conditional to also account for these:

if (e.keyCode === 13 || e.keyCode === 46 || e.keyCode === 8)

Upvotes: 1

Related Questions