как показать предупреждение при нажатии клавиши ввода - PullRequest
Новая
       1

как показать предупреждение при нажатии клавиши ввода

0 голосов
/ 07 октября 2018

Я пытаюсь получить предупреждение, но оно не отображается вообще.он показывает только, если я удалил (событие) из: function myFunction (событие)

Можете ли вы помочь мне исправить это, чтобы он мог отображать окно предупреждения, когда я набираю менее 3 букв?вот код, с которым я застрял: 

function myFunction(input, e) {
  var input, filter, table, tr, td, i;
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  if (filter.length < 3 && e.key === "Enter") {
    alert(
      "Search is going to work only if the phrase contains at least 3 characters."
    );
    return;
  }
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[1];
    if (td) {
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>

<h2>My Customers</h2>

<input type="text" id="myInput" onkeyup="myFunction(this, event)" placeholder="Search for names.." title="Type in a name">

<table id="myTable">
  <tr class="header">
    <th>Name</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Berglunds snabbkop</td>
    <td>Sweden</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Koniglich Essen</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Italy</td>
  </tr>
  <tr>
    <td>North/South</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Paris specialites</td>
    <td>France</td>
  </tr>
</table>


</body>
</html>

как я могу ее решить?

отредактировано: я добавил HTML-код, чтобы показать больше о проблеме

Ответы [ 2 ]

0 голосов
/ 07 октября 2018

См. Рабочий пример. 

function myFunction(input, e) {
  var filter, table, tr, td, i;
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  for (var i = 0, t; t = tr[i]; ++i) {
    if (t.className !== 'header')
      t.style.display = 'none'
  }
  //start search only after Enter pressed
  if (e.key !== 'Enter')
    return;
  //and length >=3
  if (filter.length < 3) {
    alert("Search is going to work only if the phrase contains at least 3 characters.");
    return;
  }
  //continue with search here
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[1];
    if (td) {
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      }
    }
  }

}
<input type="text" id="myInput" onkeyup="myFunction(this, event)" placeholder="Example: Mauro, etc." />
<table id="myTable">
  <tr class="header">
    <th>Name</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Berglunds snabbkop</td>
    <td>Sweden</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Koniglich Essen</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Italy</td>
  </tr>
  <tr>
    <td>North/South</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Paris specialites</td>
    <td>France</td>
  </tr>
</table>
0 голосов
/ 07 октября 2018

Поймай событие и получи код ключа, если он равен 13, тогда есть ключ ввода 

e.key === 13
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...