Введите событие нажатия клавиши в JavaScript

у меня есть form с двумя текстовыми полями, один выберите и один радио. Когда enter клавиша нажата, я хочу вызвать функцию javascript (определяемую пользователем), но когда я нажимаю ее, форма отправляется.

Как предотвратить form от отправки, когда enter клавиша нажата?

247
enter forms javascript-events keypress

14 ответов

if(characterCode == 13)
{
    return false; // returning false will prevent the event from bubbling up.
}
else
{
    return true;
}

Ok, поэтому представьте, что у вас есть следующее текстовое поле в форме:

<input id="scriptBox" type="text" onkeypress="return runScript(event)" />

чтобы запустить некоторый" пользовательский " скрипт из этого текстового поля при нажатии клавиши enter, а не отправить форму, вот некоторые пример код. Обратите внимание, что эта функция не выполняет проверку ошибок и, скорее всего, будет работать только в IE. Для этого вам нужно более надежное решение, но вы получите общее представление.

function runScript(e) {
    //See notes about 'which' and 'key'
    if (e.keyCode == 13) {
        var tb = document.getElementById("scriptBox");
        eval(tb.value);
        return false;
    }
}

возврат значение функции предупредит обработчик событий, чтобы не пузырь событие дальше, и предотвратит событие нажатия клавиши от дальнейшей обработки.

Примечание:

было указано, что keyCode is теперь устаревший. Следующая лучшая альтернатива which и также не рекомендуется.

к сожалению, любимый стандарт key, который широко поддерживается современными браузерами, имеет ряд изворотливое поведение в IE и Edge. Все, что старше IE11, по-прежнему нуждается в polyfill.

кроме того, в то время как устаревшее предупреждение довольно зловещее о keyCode и which, удаление приведет к значительному нарушению огромное число веб-сайтов. По этой причине маловероятно, что они собираются куда-нибудь в ближайшее время.

360

как использовать event.which и event.keyCode:

function (event) {
    if (event.which == 13 || event.keyCode == 13) {
        //code to execute here
        return false;
    }
    return true;
};
106

Если вы используете jQuery:

$('input[type=text]').on('keydown', function(e) {
    if (e.which == 13) {
        e.preventDefault();
    }
});
65

событие.key = = = "Enter"

более свежие и гораздо чище: использовать event.key. больше никаких произвольных цифровых кодов!

const node = document.getElementsByClassName(".mySelect")[0];
node.addEventListener("keydown", function(event) {
    if (event.key === "Enter") {
        event.preventDefault();
        // Do more work
    }
});

Mozilla Docs

Поддерживаемые Браузеры

33

переопределить onsubmit действие формы будет вызовом вашей функции и добавлением после нее return false, т. е.:

<form onsubmit="javascript:myfunc();return false;" >
17

Detect Enter клавиша нажата на весь документ:

$(document).keypress(function (e) {
    if (e.which == 13) {
        alert('enter key is pressed');
    }
});

http://jsfiddle.net/umerqureshi/dcjsa08n/3/

17

решение react js

 handleChange: function(e) {
    if (e.key == 'Enter') {
      console.log('test');
    }


 <div>
    <Input type="text"
       ref = "input"
       placeholder="hiya"
       onKeyPress={this.handleChange}
    />
 </div>
13

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

Это может быть очень полезно на экранах с одной кнопкой действия, например, войти, зарегистрироваться, отправить и т. д. 

<head>
        <!--Import jQuery IMPORTANT -->
        <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

         <!--Listen to Enter key event-->
        <script type="text/javascript">

            $(document).keypress(function (e) {
                if (e.which == 13 || event.keyCode == 13) {
                    alert('enter key is pressed');
                }
            });
        </script>
    </head>

протестировано во всех браузерах.

5

решение jQuery.

Я пришел сюда, ища способ отложить отправку формы до тех пор, пока не будет запущено событие размытия на вводе текста.

$(selector).keyup(function(e){
  /*
   * Delay the enter key form submit till after the hidden
   * input is updated.
   */

  // No need to do anything if it's not the enter key
  // Also only e.which is needed as this is the jQuery event object.
  if (e.which !== 13) {
       return;
  }

  // Prevent form submit
  e.preventDefault();

  // Trigger the blur event.
  this.blur();

  // Submit the form.
  $(e.target).closest('form').submit();
});

было бы неплохо получить более общую версию, которая запускала все отложенные события, а не только форму отправки.

3

гораздо более простой и эффективный способ, с моей точки зрения, должны быть : 

function onPress_ENTER()
{
        var keyPressed = event.keyCode || event.which;

        //if ENTER is pressed
        if(keyPressed==13)
        {
            alert('enter pressed');
            keyPressed=null;
        }
        else
        {
            return false;
        }
}
2

использование TypeScript и избегайте многократных вызовов функции

let el1= <HTMLInputElement>document.getElementById('searchUser');
el1.onkeypress = SearchListEnter;

function SearchListEnter(event: KeyboardEvent) {
    if (event.which !== 13) {
        return;
    }
    // more stuff
}
2
<div class="nav-search" id="nav-search">
        <form class="form-search">
            <span class="input-icon">
                <input type="text" placeholder="Search ..." class="nav-search-input" id="search_value" autocomplete="off" />
                <i class="ace-icon fa fa-search nav-search-icon"></i>
            </span>
            <input type="button" id="search" value="Search" class="btn btn-xs" style="border-radius: 5px;">
        </form>

</div>

<script type="text/javascript">
    $("#search_value").on('keydown', function(e) {
        if (e.which == 13) {
             $("#search").trigger('click');
            return false;
        }
    });
    $("#search").on('click',function(){
        alert('You press enter');
    });
</script>
0

собственный JS (fetch api)

document.onload = (() => {
    alert('ok');
    let keyListener = document.querySelector('#searchUser');
    // 
    keyListener.addEventListener('keypress', (e) => {
        if(e.keyCode === 13){
            let username = e.target.value;
            console.log(`username = ${username}`);
            fetch(`https://api.github.com/users/${username}`,{
                data: {
                    client_id: 'xxx',
                    client_secret: 'xxx'
                }
            })
            .then((user)=>{
                console.log(`user = ${user}`);
            });
            fetch(`https://api.github.com/users/${username}/repos`,{
                data: {
                    client_id: 'xxx',
                    client_secret: 'xxx'
                }
            })
            .then((repos)=>{
                console.log(`repos = ${repos}`);
                for (let i = 0; i < repos.length; i++) {
                     console.log(`repos ${i}  = ${repos[i]}`);
                }
            });
        }else{
            console.log(`e.keyCode = ${e.keyCode}`);
        }
    });
})();
<input _ngcontent-inf-0="" class="form-control" id="searchUser" placeholder="Github username..." type="text">
0

Если вы хотите сделать это с помощью скрипта purly java, вот пример, который отлично работает

допустим, это ваш html-файл 

<!DOCTYPE html>
<html>
  <body style="width: 500px">
    <input type="text" id="textSearch"/> 
      <script type="text/javascript" src="public/js/popup.js"></script>
  </body>
</html>

в своем всплывающее окно.js файл просто используйте эту функцию 

var input = document.getElementById("textSearch");
input.addEventListener("keyup", function(event) {
    event.preventDefault();
    if (event.keyCode === 13) {
        alert("yes it works,I'm happy ");
    }
});
0