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

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

272 голосов
/ 25 мая 2009

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

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

Ответы [ 17 ]

2 голосов
/ 15 марта 2018

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

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

function SearchListEnter(event: KeyboardEvent) {
    if (event.which !== 13) {
        return;
    }
    // more stuff
}
2 голосов
/ 07 июня 2015

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

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

        //if ENTER is pressed
        if(keyPressed==13)
        {
            alert('enter pressed');
            keyPressed=null;
        }
        else
        {
            return false;
        }
}
1 голос
/ 22 января 2019

Так что, возможно, лучшим решением, которое охватит как можно больше браузеров и будет в будущем, будет 

if (event.which === 13 || event.keyCode === 13 || event.key === "Enter")
1 голос
/ 10 июня 2017

native 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 голосов
/ 07 марта 2019

Эта функция preventKey() работает независимо от устаревших функций браузера.

Должно присутствовать только одно из трех свойств which (устарело), ​​keyCode (устарело) или key (проблемы в IE).

https://jsfiddle.net/tobiobeck/z13dh5r2/

JS 

function preventKey(event, expectedKey, expectedCode) {
  const code = event.which || event.keyCode;

  if (expectedKey === event.key || code === expectedCode) {
    return true;
  }
  return false;
}

document.getElementById('myInput').addEventListener('keydown', function(event) {

  if (preventKey(event, 'Enter', 13)) {
    event.preventDefault();
  }
});

HTML 

<form>
  <input id="myInput">
</form>

Тестирование браузера

Если вы хотите протестировать разные браузеры, прокомментируйте или раскомментируйте вручную одну из трех следующих event.something строк: 

var event = {};
event.which = 13;
//event.keyCode = 13;
//event.key = 'Enter'

if (preventKey(event, 'Enter', 13)) {
  console.log('enter was pressed');
}
0 голосов
/ 01 февраля 2019

Немного просто

Не отправляйте форму по нажатию клавиши «Ввод»: 

<form id="form_cdb" onsubmit="return false">

Выполнить функцию по нажатию клавиши «Ввод»: 

<input type="text" autocomplete="off" onkeypress="if(event.key === 'Enter') my_event()">
0 голосов
/ 28 августа 2017 
<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>
Страница:
...