javascript - 找到输入框中字符串被删除的部分

Question

我想使用退格或删除查找已删除的字符串。

检查我的代码片段:

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”为例): 完美运行 - 只需输入一个字符串“示例”

让我们尝试使用退格键删除一个字符: 字符串“Example”应该是“Exampl”，对应于第一个字符串。

让我们使用相同的按钮 - 退格从“Exampl”中删除另一个字符: 同样，结果与上一个图像相同 - 它应该从末尾删除最后一个字符(但是，它不应该只适用于最后一个字符，因为用户可以从任何位置删除字符。

<小时/>

我仅使用退格按钮完成此测试，但是，使用删除(向前退格)按钮应该以完全相同的方式工作。我怎样才能实现这个目标？

<小时/>

我找不到与我的类似的线程，因此创建了另一个线程。也许这是重复的，抱歉:)

Answer 1

将$('input').on('keydown',changeText1);更改为$('input').on('keyup',changeText1);

因此，在触发 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>