Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – How do I create a backspace button using JS?

What is supposed to happen is when the backspace <button> element is clicked , it reacts as if you typed a backspace button on your keyboard. This is not what is happening.

What have I tried? Scouring the internet, there are a lot of samples available for calculators, text areas, and paragraphs, including sample code on how to avoid backspace being pressed.

Also, on some forums, there are some very lengthy scripts, which after many days of trial and error, I couldn’t get to work. Too much to paste here.

I just had a look at some of the other questions on this forum, I have to admit I am totally lost.

<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    table,
    tr,
    td {
      border: 1px solid black;
      border-collapse: collapse;
    }
  </style>
</head>

<body>
  <input id="myInput" type="search" placeholder="Filter Criteria..">
  <button id="back">backspace button</button>
  <table>
    <tbody id="myTable">
      <tr>
        <td>sedan</td>
        <td>suv</td>
        <td>hatchback</td>
      </tr>
      <tr>
        <td>fighterjet</td>
        <td>biplane</td>
        <td>helicopter</td>
      </tr>
    </tbody>
  </table>

</body>

<script>
  $("#back").click(function() {
    $("#myInput").text((i, text) => text.slice(0, -1));
  });
</script>

<script>
  $(document).ready(function() {
    $("#myInput").on("keyup", function() {
      var value = $(this).val().toLowerCase();
      $("#myTable tr").filter(function() {
        $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
      });
    });
  });
</script>

</html>
Tags:

2

Answers


  1. 0

    You made a mistake. HTML input element doesn’t support text() function. If you want the back button click to work like the backspace keyboard shortcut, you should use the val() function.

    I provide updated code.

    <html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      table,
      tr,
      td {
        border: 1px solid black;
        border-collapse: collapse;
      }
    </style>
  </head>

  <body>
    <input id="myInput" type="search" placeholder="Filter Criteria..">
    <button id="back">backspace button</button>
    <table>
      <tbody id="myTable">
        <tr>
          <td>sedan</td>
          <td>suv</td>
          <td>hatchback</td>
        </tr>
        <tr>
          <td>fighterjet</td>
          <td>biplane</td>
          <td>helicopter</td>
        </tr>
      </tbody>
    </table>
  </body>
  <script>
    $(document).ready(function() {
      $("#myInput").on("keyup", function() {
        var value = $(this).val().toLowerCase();
        $("#myTable tr").filter(function() {
          $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
        });
      });

      $("#back").click(function() {
        $("#myInput").val((i, val) => val.slice(0, -1)); // Use val() instead of text()
      });
    });
  </script>
</html>
    Login or Signup to reply.
  2. 0

    To mimic Backspace, you can use the selection of the input and replace it with an slice the current value.

    I included a couple of jQuery plugins which are reusable.

    $(function() {
  var $criteriaTxt = $('#criteria-txt');
  var $backspaceBtn = $('#backspace-btn');
  var $resultTbl = $('#result-tbl');
  
  // Listen to the input event
  $criteriaTxt.on('input', function() {
    $resultTbl.filterTableRows($(this).val());
  });
  
  // Handle "backspace" and trigger the input event
  $backspaceBtn.on('click', function() {
    $criteriaTxt.handleBackspace().trigger('input');
  });
});

/* jQuery plugin: $.fn.filterTableRows */
(function($) {
  $.fn.filterTableRows = function(term) {
    var lowerTerm = term.toLowerCase();
    this.find('tbody tr').filter(function() {
      $(this).toggle($(this).containsTerm(lowerTerm));
    });
    return this;
  };
  $.fn.containsTerm = function(term) {
    return this.text().toLowerCase().includes(term);
  };
})(jQuery);

/* jQuery plugin: $.fn.handleBackspace (wrapper) */
(function() {
  $.fn.handleBackspace = function() {
    handleBackspace(this.get(0));
    return this;
  }
})(jQuery);

// Function to mimic backspace on an input
function handleBackspace(input) {
  var value = input.value;
  var start = input.selectionStart;
  var end = input.selectionEnd;

  // If there is a selection, remove the selected text
  if (start !== end) {
    input.value = value.slice(0, start) + value.slice(end);
    // Set the new cursor position
    input.setSelectionRange(start, start);
  } else if (start > 0) {
    // Remove the character before the cursor if no selection
    input.value = value.slice(0, start - 1) + value.slice(start);
    // Set the new cursor position
    input.setSelectionRange(start - 1, start - 1);
  }

  input.focus();
}
    table {
  border-collapse: collapse;
}

table, th, td {
  border: 1px solid black;
}

th, td {
  padding: 0.25rem;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<input id="criteria-txt" type="search" placeholder="Filter Criteria...">
<button type="button" id="backspace-btn">Backspace</button>
<hr>
<table id="result-tbl"> <!-- The id or class should be on table -->
  <tbody>
    <tr>
      <td>sedan</td>
      <td>suv</td>
      <td>hatchback</td>
    </tr>
    <tr>
      <td>fighterjet</td>
      <td>biplane</td>
      <td>helicopter</td>
    </tr>
  </tbody>
</table>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search