Текстовое поле без кнопки. Если вы введете несколько букв и pu sh 'Enter', появится диалоговое окно предупреждения через 1 секунду с текстом из текстового поля. - PullRequest
Новая
       78

Текстовое поле без кнопки. Если вы введете несколько букв и pu sh 'Enter', появится диалоговое окно предупреждения через 1 секунду с текстом из текстового поля.

0 голосов
/ 05 мая 2020

Я хочу создать веб-страницу с текстовым полем без кнопки. Если я набираю пару букв и пу sh кнопку «Ввод», появляется диалоговое окно предупреждения с текстом из текстового поля через 1 секунду. Все работает правильно, только это диалоговое окно с предупреждением появляется не после Enter, а после щелчка мышью. 

<!Doctype HTML!>
<html>
<head>
  <meta charset="utf-8">
  <head>6-4</head>
  <script>
 
var keyCode = '';
var naam = '';

window.onload = function () {
  
  var divResult = document.getElementById('divResult');
  
  document.getElementById('txtInput').addEventListener('blur', function () {
    naam = document.getElementById('txtInput').value;
    
    document.getElementById('txtInput').onkeyup = function (e) {
      keyCode = e.keyCode;
      if (keyCode === 13) {
      }
    };
    setTimeout("alert(naam);", 1000);
  }, false);
};
function stopAlerts() {
  clearInterval(txtNaam);
}
  
  </script>
</head>
<body>
  <h2>Type some letters in text box and push 'Enter'</h2>
  <input type="text" id="txtInput" value="" />
  <div id="divResult"></div>
</body>
</html>

Ответы [ 2 ]

1 голос
/ 06 мая 2020

Здесь используется Jquery для обнаружения нажатой клавиши ввода.

Примечания:

  • <input> не требует /, потому что это самозакрывающийся тег. Для получения дополнительной информации см. Допустимы ли (непустые) самозакрывающиеся теги в HTML5? .
  • Вы не можете вложить 2 <head> тегов. Это должно быть <title>.
  • <!Doctype html> может иметь только 1 ! в <.
  • Если вы хотите, чтобы он отображал только предупреждение внутри текстового поля, измените 
$(document).on('keydown',function(event) {
   var keycode = (event.keyCode ? event.keyCode : event.which);
   if (keycode == '13') {
      alert(document.getElementById("txtInput").value);
   }
});

до 

$(document).on('keydown',function(event) {
   var keycode = (event.keyCode ? event.keyCode : event.which);
   if (keycode == '13') {
      alert(document.getElementById("txtInput").value);
    }
});


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!Doctype Html>
<html>

<head>
  <meta charset="utf-8">
  <style>
    h1 {
      font-size: 1.1em;
    }
  </style>
  <title>6-4</title>
  <script>
    $(document).on('keydown', function(event) {
      var keycode = (event.keyCode ? event.keyCode : event.which);
      if (keycode == '13') {
        alert(document.getElementById("txtInput").value);
      }
    });
  </script>
</head>

<body>
  <h1>Type some letters in text box and push 'Enter'</h1>
  <input type="text" id="txtInput">
  <div id="divResult"></div>
</body>

</html>
1 голос
/ 05 мая 2020

Просто установите одно событие в текстовом поле keydown и переместите таймер в блок true оператора if.

Примечания:

  • Ваш DOCTYPE неверен. В начале документа должен быть только восклицательный знак.
  • Чтобы ваш документ HTML был действительным, вы должны добавить непустой элемент title в раздел head. Вы не можете вложить элемент head в элемент пыльника head.
  • Если вы хотите, чтобы ваше текстовое поле было пустым, нет необходимости добавлять value="".
  • Передача строка от JavaScript до setTimeout() не рекомендуется. Вместо этого передайте функцию, которая будет выполняться.
  • Вместо того, чтобы помещать script в head и затем настраивать window.onload обработчик событий для кода, который должен запускаться автоматически, когда DOM будет готов, переместите свой script непосредственно перед закрывающим тегом body, удалите обработчик событий onload и просто выполните код, который вы хотите запустить.
  • Кроме того, нет необходимости сканировать элемент текстового поля в обработчике событий для этого элемента. Вы можете просто получить доступ к текстовому полю в обработчике с помощью e.target.
  • Не используйте самозакрывающиеся теги.
  • Использование h2 без h1 семантически неверен и вызовет проблемы для тех, кто полагается на вспомогательные технологии. Никогда не используйте элемент HTML из-за того, как браузер стилизует его по умолчанию. Укладка - это работа CSS. Если вам нужен большой жирный текст и вы не начинаете новый раздел, держитесь подальше от элементов заголовка и просто стилизуйте текст. 

<!doctype HTML>
<html>
<head>
  <meta charset="utf-8">
  <title>6-4</title>
  <style>
    h1 { font-size:1.1em; }
  </style>
</head>
<body>
  <h1>Type some letters in text box and push 'Enter'</h1>
  <input type="text" id="txtInput">
  <div id="divResult"></div>
  
  <script>
    var divResult = document.getElementById('divResult');
    document.getElementById('txtInput').addEventListener('keydown', function (e) {
      if (e.key === "Enter") {
          setTimeout(function(){ alert(e.target.value); }, 1000);
      }
    }, false);
  </script>
</body>
</html>
...