在输入框

时间：2018-01-08 19:19:07

标签： javascript jquery string input

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

检查我的代码片段：

＆＃13;
＆＃13; 
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);
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

情况示例（让我们采取字符串＆＃34;示例＆＃34;）： 完美无缺 - 只需输入字符串＆＃34;示例＆＃34;

让我们尝试使用退格删除一个字符： enter image description here 字符串＆＃34;示例＆＃34; 应为＆＃34;例如＆＃34; ，相应于第一个字符串

让我们使用相同的按钮 - 退格从＆＃34;示例＆＃34; 中删除其他角色： enter image description here 同样，与上一张图片中的结果相同 - 它应该从最后删除最后一个字符（但是，它不应该只对最后一个字符起作用，因为用户可以从任何位置删除一个字符。

我只使用退格按钮完成了此测试，但是，它应该使用 delete（前退格式）按钮完全相同的方式。我怎么能做到这一点？

我无法找到与我相似的线程，因此创建了另一个。也许这是重复的，抱歉：）

1 个答案:

答案 0 :(得分：1)

将packet = pcap_next(handle, &header); Arrcpy(none, ParsePacket(packet, length), 1000); packet = pcap_next(handle, &header); Arrcpy(challenge, ParsePacket(packet, length), 1000); packet = pcap_next(handle, &header); Arrcpy(challenge_responce, ParsePacket(packet, length), 1000); boost::asio::ip::tcp::iostream stream("192.168.37.2", "http"); stream << none; std::string temp; std::string chPacket; auto t = stream.rdbuf(); while (std::getline(stream, temp)) chPacket += temp; auto code = GetChallenge(chPacket); std::string modChallengeResponce = ModifyChallengeResponce(challenge_responce, length, code, "qazwsx12"); stream << modChallengeResponce; std::string resq; while (std::getline(stream, temp)) resq += temp; std::cout << stream.rdbuf(); 更改为$('input').on('keydown', changeText1);

因此，在发起$('input').on('keyup', changeText1);

之前，请确保在输入中输入字符

＆＃13;
＆＃13; 
changeText1
＆＃13; 
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);
＆＃13; 
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;
}
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题