Вопрос:

Как перехватить нажатие клавиши Enter?

javascript javascript-events textbox keypress onkeypress

264829 просмотра

11 ответа

815 Репутация автора

На моей HTML-странице у меня было текстовое поле для ввода пользователем ключевого слова для поиска. Когда они нажимают кнопку поиска, функция JavaScript генерирует URL и запускается в новом окне.

Функция JavaScript работает правильно, когда пользователь щелкает мышью по кнопке поиска, но нет ответа, когда пользователь нажимает клавишу ВВОД.

function searching(){
    var keywordsStr = document.getElementById('keywords').value;
    var cmd ="http://XXX/advancedsearch_result.asp?language=ENG&+"+ encodeURI(keywordsStr) + "&x=11&y=4";
    window.location = cmd;
}
<form name="form1" method="get">
    <input name="keywords" type="text" id="keywords" size="50" >
    <input type="submit" name="btn_search" id="btn_search" value="Search" 
        onClick="javascript:searching(); return false;" onKeyPress="javascript:searching(); return false;">
    <input type="reset" name="btn_reset" id="btn_reset" value="Reset">
</form>
Автор: Joe Yan Источник Размещён: 21.12.2012 09:18

Ответы (11)


1 плюс

1962 Репутация автора

Используйте атрибут onsubmit в теге формы, а не нажмите кнопку «Отправить».

Автор: scoota269 Размещён: 21.12.2012 09:21

23 плюса

32363 Репутация автора

Используйте onkeypress. Проверьте, является ли нажатая клавиша вводом (keyCode = 13). если да, вызовите searching()функцию.

HTML

<input name="keywords" type="text" id="keywords" size="50"  onkeypress="handleKeyPress(event)">

JAVASCRIPT

function handleKeyPress(e){
 var key=e.keyCode || e.which;
  if (key==13){
     searching();
  }
}

Вот фрагмент, показывающий это в действии:

document.getElementById("msg1").innerHTML = "Default";
function handle(e){
 document.getElementById("msg1").innerHTML = "Trigger";
 var key=e.keyCode || e.which;
  if (key==13){
     document.getElementById("msg1").innerHTML = "HELLO!";
  }
}
<input type="text" name="box22" value="please" onkeypress="handle(event)"/>
<div id="msg1"></div>

Автор: bipen Размещён: 21.12.2012 09:22

1 плюс

2113 Репутация автора

Вам нужно создать обработчик для onkeypressдействия.

HTML

<input name="keywords" type="text" id="keywords" size="50" onkeypress="handleEnter(this, event)" />

JS

function handleEnter(inField, e)
{
    var charCode;

    //Get key code (support for all browsers)
    if(e && e.which)
    {
        charCode = e.which;
    }
    else if(window.event)
    {
        e = window.event;
        charCode = e.keyCode;
    }

    if(charCode == 13)
    {
       //Call your submit function
    }
}
Автор: ᴍᴀᴛᴛ ʙᴀᴋᴇʀ Размещён: 21.12.2012 09:25

81 плюса

4050 Репутация автора

Решение

Форма подхода

Как говорит scoota269, вы должны использовать onSubmitвместо этого, потому что нажатие клавиши ввода в текстовом поле наиболее вероятно вызовет отправку формы (если внутри формы)

<form action="#" onsubmit="handle">
    <input type="text" name="txt" />
</form>

<script>
    function handle(e){
        e.preventDefault(); // Otherwise the form will be submitted

        alert("FORM WAS SUBMITTED");
    }
</script>

Подход текстового поля

Если вы хотите, чтобы в поле ввода было событие, вам нужно убедиться, что вы handle()вернете false, иначе форма будет отправлена.

<form action="#">
    <input type="text" name="txt" onkeypress="handle(event)" />
</form>

<script>
    function handle(e){
        if(e.keyCode === 13){
            e.preventDefault(); // Ensure it is only this code that rusn

            alert("Enter was pressed was presses");
        }
    }
</script>
Автор: TryingToImprove Размещён: 21.12.2012 09:42

5 плюса

51 Репутация автора

Вы можете использовать JavaScript

ctl.attachEvent('onkeydown', function(event) {

        try {
            if (event.keyCode == 13) {
                FieldValueChanged(ctl.id, ctl.value);
            }
            false;
        } catch (e) { };
        return true
    })
Автор: user2753926 Размещён: 06.09.2013 10:14

6 плюса

835 Репутация автора

Попробуй это....

Встроенный HTML

onKeydown="Javascript: if (event.keyCode==13) fnsearch();"
or
onkeypress="Javascript: if (event.keyCode==13) fnsearch();"

JavaScript

<script>
function fnsearch()
{
   alert('you press enter');
}
</script>
Автор: Rahul Dadhich Размещён: 25.09.2013 07:10

2 плюса

49 Репутация автора

Немного общего JQuery для вас ..

$('div.search-box input[type=text]').on('keydown', function (e) {
    if (e.which == 13) {
        $(this).parent().find('input[type=submit]').trigger('click');
        return false;
     }
});

Это работает при условии, что текстовое поле и кнопка отправки находятся в одном и том же элементе div. работает удовольствие с несколькими окнами поиска на странице

Автор: Andy - CodeRemedy Размещён: 12.11.2013 02:28

0 плюса

1257 Репутация автора

<form action="#">
    <input type="text" id="txtBox" name="txt" onkeypress="handle" />
</form>






<script>
    $("#txtBox").keypress(function (e) {
            if (e.keyCode === 13) {
                alert("Enter was pressed was presses");
            }

            return false;
        });

    </script>
Автор: ch.smrutiranjan parida Размещён: 07.08.2014 11:33

1 плюс

29 Репутация автора

	// jquery press check by Abdelhamed Mohamed


    $(document).ready(function(){
    $("textarea").keydown(function(event){
        if (event.keyCode == 13) {
         // do something here
         alert("You Pres Enter");
        }
       });
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <textarea></textarea>

Автор: Abdelhamed Mohamed Размещён: 24.08.2016 07:53

1 плюс

7298 Репутация автора

Используйте event.keyвместо event.keyCode!

function onEvent(event) {
    if (event.key === "Enter") {
        // Submit form
    }
};

Mozilla Docs

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

Автор: Gibolt Размещён: 05.09.2017 09:34

0 плюса

1853 Репутация автора

Это простой ответ в стиле ES-6. Для захвата нажатия клавиши «ввод» и выполнения некоторой функции

<input
    onPressEnter={e => (e.keyCode === 13) && someFunc()}
/>
Автор: Glen Thompson Размещён: 09.04.2019 02:18
Вопросы из категории :
32x32