Как вызвать кнопку HTML при нажатии Enter в текстовом поле?

Итак, код, который у меня есть до сих пор:



<fieldset id="LinkList">

    <input type="text" id="addLinks" name="addLinks" value="http://">

    <input type="button" id="linkadd" name="linkadd" value="add">

</fieldset>


это не <form> и в <div>. Однако, когда я набираю что-то в textbox называется "addLinks" я хочу, чтобы пользователь мог нажать Enter и вызвать "linkadd"button который затем будет запускать функцию JavaScript.

Как я могу это сделать?

Спасибо



Edit:
Я нашел этот код, но он, кажется, не работает.



$("#addLinks").keyup(function(event){

    if(event.keyCode == 13){

        $("#linkadd").click();

    }

});
1570   10  

10 ответов:

$(document).ready(function(){
    $('#TextBoxId').keypress(function(e){
      if(e.keyCode==13)
      $('#linkadd').click();
    });
});
97  
2012-10-18 15:57:32

есть js-свободное решение.

Set type=submit к кнопке, которую вы хотите использовать по умолчанию и type=button к другим кнопкам. Теперь в форме ниже вы можете нажать Enter в любых полях ввода, и будет работать (несмотря на то, что это вторая кнопка в форме).

пример:

    <button id='close_renderer_button' class='btn btn-success'
            title='Перейти к редактированию программы'
            type=button>
      <span class='glyphicon glyphicon-edit'> </span> Edit program
    </button>
    <button id='render_button' class='btn btn-primary'
            title='Построить фрактал'
            type=submit
            formaction='javascript:alert("Bingo!");'>
      <span class='glyphicon glyphicon-send'> </span> Render
    </button>

протестировано в FF24 и Chrome 35 (formaction это функция html5, но type нет).

52  
2014-06-16 17:05:29

Это 2018.

НЕ ИСПОЛЬЗОВАТЬ keypress

  1. keypress событие не запускается когда пользователь нажимает ключ, который не производит никакого символа, например Tab, Caps Lock,удалить, Backspace,побег, слева и справа Shift, функциональные клавиши( F1 - F12).

    keypress событие с Mozilla Developer Network

    The keypress событие запускается, когда ключ придавливается, и этот ключ обычно создает символьное значение. Используйте .

  2. он был осужден.

    keypress событие с DOM Уровень 3-рабочий проект W3C, 04 августа 2016-UI Events

    Примечание: The keypress событие традиционно ассоциируется с обнаружение символьного значения, а не физического ключа, и могут быть доступны не на всех ключах в некоторых конфигурациях. предупреждение: The keypress тип события, определенные в этой спецификации для справки и полноты, но эта спецификация осуждает использование этого тип события. при редактировании контекстов авторы могут подписаться на событие.

НЕ ИСПОЛЬЗОВАТЬ KeyboardEvent.keyCode

  1. он был осужден.

    KeyboardEvent.keyCodeс Mozilla Developer Network

    не рекомендуется: эта функция была удалена из веб-стандартов. Хотя некоторые браузеры могут по-прежнему поддерживать это в процессе удаления. Избегайте его использования и обновляйте существующий код, если это возможно; см. таблицу совместимости в нижней части этой страницы, чтобы принять решение. Помните, что эта функция может перестать работать в любое время.

что я должен использовать потом? (Хорошая практика)

версия ES6

// Put this code at the end of the <body>.
document.querySelector("#addLinks").addEventListener("keyup", event => {
    if(event.key !== "Enter") return; // Use `.key` instead.
    document.querySelector("#linkadd").click(); // Things you want to do.
    event.preventDefault(); // No need to `return false;`.
});

не-ES6 версия

// Put this code at the end of the <body>.
document.querySelector("#addLinks").addEventListener("keyup", function(event) {
    if(event.key !== "Enter") return; // Use `.key` instead.
    document.querySelector("#linkadd").click(); // Things you want to do.
    event.preventDefault(); // No need to `return false;`.
});
26  
2018-05-25 11:46:35
  1. заменить button с submit
  2. быть прогрессивное, убедитесь, что у вас серверная версия
  3. привязать JavaScript к submit обработчик формы, а не click обработчик кнопки

нажатие enter в поле вызовет отправку формы, и обработчик отправки сработает.

10  
2012-10-18 15:57:56

вы можете добавить обработчик событий на вход следующим образом:

document.getElementById('addLinks').onkeypress=function(e){
    if(e.keyCode==13){
        document.getElementById('linkadd').click();
    }
}
7  
2012-10-18 16:00:50

прежде всего добавьте файл библиотеки jquery jquery и назовите его в своей html-голове.

а затем использовать код на основе jquery...

$("#id_of_textbox").keyup(function(event){
    if(event.keyCode == 13){
        $("#id_of_button").click();
    }
});
2  
2012-10-18 16:00:36

Это должно сделать это, я использую jQuery вы можете написать простой javascript.
заменить sendMessage() С вашей функциональности.

$('#addLinks').keypress(function(e) {
    if (e.which == 13) {
        sendMessage();
        e.preventDefault();
    }
});
2  
2015-10-13 16:02:11

основываясь на некоторых предыдущих ответах, я придумал это:

<form>
  <button id='but' type='submit'>do not click me</button>
  <input type='text' placeholder='press enter'>
</form>

$('#but').click(function(e) {
  alert('button press');
  e.preventDefault();
});

посмотри Скрипка

изменить: Если вы не хотите добавлять дополнительные элементы html, вы можете сделать это только с помощью JS:

    $("input").keyup(function(event) {
        if (event.keyCode === 13) {
            $("button").click();
        }
    });
2  
2017-10-29 01:28:38

Он работает, когда тип ввода="кнопка" заменяется на тип ввода="отправить" для кнопки по умолчанию, которая должна быть вызвана.

0  
2016-10-31 12:13:34

Я использую кнопку кендо. Это сработало для меня. 

<div class="form-group" id="indexform">
    <div class="col-md-8">
            <div class="row">
                <b>Search By Customer Name/ Customer Number:</b>
                @Html.TextBox("txtSearchString", null, new { style = "width:400px" , autofocus = "autofocus" })
                @(Html.Kendo().Button()
                    .Name("btnSearch")
                    .HtmlAttributes(new { type = "button", @class = "k-primary" })
                    .Content("Search")
                    .Events(ev => ev.Click("onClick")))
            </div>
    </div>
</div>
<script>
var validator = $("#indexform").kendoValidator().data("kendoValidator"),
          status = $(".status");
$("#indexform").keyup(function (event) {
    if (event.keyCode == 13) {
        $("#btnSearch").click();
    }
});
</script>
-1  
2017-02-17 17:20:41

Comments

    Ничего не найдено.
Click here to cancel reply.