Find the deleted part of the string in the input box

Question

I'd like to find the deleted string using either backspace or delete.

Check my snippet of code:

var changeText2 = function(e) {
  var request = $('input').val() + String.fromCharCode(e.which);
  $('#instant-search').text(request);
};

var changeText1 = function(e) {
  if (/[-a-z0-90áãâäàéêëèíîïìóõôöòúûüùçñ!@#$%^&*()_+|~=`{}\[\]:";'<>?,.\s\/]+/gi.test(String.fromCharCode(e.which))) {
    $('input').on('keypress', changeText2);
  }

  switch (e.key) {
    case "Backspace":
      $('#instant-search').text($('#search').val());
      break;
    case "Escape":
      // Do something for "esc" key press.
      break;
    default:
      return; // Quit when this doesn't handle the key event.
  }
};

$('input').on('keydown', changeText1);

html,
body {
  height: 100%;
  width: 100%;
}

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  background: #000428;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #004e92, #000428);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #004e92, #000428);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.v-container {
  display: table;
  height: 100%;
  width: 100%;
}

.v-content {
  display: table-cell;
  vertical-align: middle;
}

.text-center {
  text-align: center;
}

h1 {
  color: #fff;
}

.input {
  overflow: hidden;
  white-space: nowrap;
}

.input input#search {
  width: calc(100% - 80px);
  height: 50px;
  border: none;
  font-size: 10pt;
  float: left;
  color: #4f5b66;
  padding: 0 65px 0 15px;
  outline: none;
}

.input button.icon {
  border: none;
  height: 50px;
  width: 50px;
  color: #4f5b66;
  background: #fff;
  border-left: 1px solid #ddd;
  margin-left: -50px;
  outline: none;
  cursor: pointer;
  -webkit-transition: background .5s;
  transition: background .5s;
}

.input button.icon:hover {
  background: #eee;
}

table {
  width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
}

table tr {
  background: #fff;
  -webkit-user-select: none;
  user-select: none;
}

table td {
  padding: 10px;
}

table tr:nth-child(1) {
  border-top: 1px solid #ddd;
}

table tr:nth-child(1):hover {
  border-top: none;
}

table tr:nth-child(1):hover td {
  padding-top: 11px;
}

td:nth-child(3) {
  width: 75%;
}

td:nth-child(2) {
  width: 85%;
  text-align: left;
}

table tr:hover {
  background: #ffc800;
  color: #fff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script  src="https://use.fontawesome.com/911574fea4.js"></script>
<div class="v-container">
  <div class="v-content text-center">
    <div class="input">
      <input type="text" id="search" placeholder="Search...">
      <button class="icon"><i class="fa fa-search"></i></button>

      <table>
        <tr>
          <td class="fa fa-search">
            <td id="instant-search"></td>
        </tr>
      </table>
    </div>
  </div>
</div>

Example of the situation (let's take a string "Example"): Works perfectly - just entered a string "Example"

Let's try deleting one character using backspace: The string "Example" should be "Exampl", accordingly to the first string.

Let's remove another character from the "Exampl" using the same button - backspace: Again, the same result as in the previous image - it should remove the last character from the end (however, it shouldn't work only with the last characters, because the user can remove a character from any position.

I've done this test only using a backspace button, however, it should work exactly the same way using the delete (forward backspace) button. How could I achieve this?

I couldn't find a similar thread to mine so created another one. Maybe it's a duplicate, sorry :)

Can you explain a little bit more what do you mean, please? I think I've explained everything in the question. — Lukas Naujokaitis, Jan 08 '18 at 19:21
I didn't even try to use this (yeah, I tried it once and I know how it works). The reason I don't want to use it is that I want an instant response, not when the button is released. — Lukas Naujokaitis, Jan 08 '18 at 19:24
@epascarello it's in the hidden code snippet. And how about storing the value of the input in a global variable whenever the value changes, and when backspace or delete is pressed, compare the value before the change and after? — rolfv1, Jan 08 '18 at 19:24
Maybe, I'll take a deep look at another thread. But thank you for the attention :) — Lukas Naujokaitis, Jan 08 '18 at 19:28

score 1 · Answer 1 · answered Jan 08 '18 at 19:23

Change $('input').on('keydown', changeText1); to $('input').on('keyup', changeText1);

So you make sure that the character is typed in the input, before you fire changeText1

var changeText2 = function(e) {
  var request = $('input').val() + String.fromCharCode(e.which);
  $('#instant-search').text(request);
};

var changeText1 = function(e) {
  if (/[-a-z0-90áãâäàéêëèíîïìóõôöòúûüùçñ!@#$%^&*()_+|~=`{}\[\]:";'<>?,.\s\/]+/gi.test(String.fromCharCode(e.which))) {
    $('input').on('keypress', changeText2);
  }

  switch (e.key) {
    case "Backspace":
      $('#instant-search').text($('#search').val());
      break;
    case "Escape":
      // Do something for "esc" key press.
      break;
    default:
      return; // Quit when this doesn't handle the key event.
  }
};

$('input').on('keyup', changeText1);

html,
body {
  height: 100%;
  width: 100%;
}

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  background: #000428;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #004e92, #000428);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #004e92, #000428);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.v-container {
  display: table;
  height: 100%;
  width: 100%;
}

.v-content {
  display: table-cell;
  vertical-align: middle;
}

.text-center {
  text-align: center;
}

h1 {
  color: #fff;
}

.input {
  overflow: hidden;
  white-space: nowrap;
}

.input input#search {
  width: calc(100% - 80px);
  height: 50px;
  border: none;
  font-size: 10pt;
  float: left;
  color: #4f5b66;
  padding: 0 65px 0 15px;
  outline: none;
}

.input button.icon {
  border: none;
  height: 50px;
  width: 50px;
  color: #4f5b66;
  background: #fff;
  border-left: 1px solid #ddd;
  margin-left: -50px;
  outline: none;
  cursor: pointer;
  -webkit-transition: background .5s;
  transition: background .5s;
}

.input button.icon:hover {
  background: #eee;
}

table {
  width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
}

table tr {
  background: #fff;
  -webkit-user-select: none;
  user-select: none;
}

table td {
  padding: 10px;
}

table tr:nth-child(1) {
  border-top: 1px solid #ddd;
}

table tr:nth-child(1):hover {
  border-top: none;
}

table tr:nth-child(1):hover td {
  padding-top: 11px;
}

td:nth-child(3) {
  width: 75%;
}

td:nth-child(2) {
  width: 85%;
  text-align: left;
}

table tr:hover {
  background: #ffc800;
  color: #fff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script  src="https://use.fontawesome.com/911574fea4.js"></script>
<div class="v-container">
  <div class="v-content text-center">
    <div class="input">
      <input type="text" id="search" placeholder="Search...">
      <button class="icon"><i class="fa fa-search"></i></button>

      <table>
        <tr>
          <td class="fa fa-search">
            <td id="instant-search"></td>
        </tr>
      </table>
    </div>
  </div>
</div>

Try to not release a button and you will see, it won't update accordingly to the input field's value. — Lukas Naujokaitis, Jan 08 '18 at 19:25

Find the deleted part of the string in the input box

1 Answers1