¿Cómo activar el botón HTML cuando presiona Enter en el cuadro de texto?


106

Entonces el código que tengo hasta ahora es:

<fieldset id="LinkList">
    <input type="text" id="addLinks" name="addLinks" value="http://">
    <input type="button" id="linkadd" name="linkadd" value="add">
</fieldset>

No está en a <form>y es exactamente como está dentro de a <div>. Sin embargo, cuando textboxescribo algo en el llamado "addLinks", quiero que el usuario pueda presionar Enter y activar el "linkadd" buttonque luego ejecutará una función de JavaScript.
¿Cómo puedo hacer esto?
Gracias

Editar: encontré este código, pero no parece funcionar.

$("#addLinks").keyup(function(event){
    if(event.keyCode == 13){
        $("#linkadd").click();
    }
});

3
enlazar keypressy comprobar e.charCode==13(botón de entrada).
Brad Christie

¿Ha agregado la referencia de la biblioteca jquery antes de usar el código anterior?
Milind Anantwar

Sí, hice referencia a la biblioteca, no estoy seguro de por qué no funcionaba, pero ahora está bien. Gracias
Ben

Sí, como mencionó @BradChristie, keypresso keydownmencionó en esta respuesta, es el camino a seguir.
metakermit

Respuestas:


117
$(document).ready(function(){
    $('#TextBoxId').keypress(function(e){
      if(e.keyCode==13)
      $('#linkadd').click();
    });
});

5
agregar 'return false' después del evento de clic también es útil, para evitar una entrada predeterminada, presione otros botones en la página
deebs

La respuesta de dmitry_romanov es mejor porque es html puro.
McKay

6
@McKay, no, no lo es. Los botones se pueden utilizar para otras cosas además de las formas. De hecho, la pregunta del OP no tiene forma explícita.
Dan

2
@deebs tiene razón, no estoy seguro de lo que hice ese día, pero debo haber estado teniendo un pedo cerebral.
Tim en MastersAllen


76

Es …… 2020. Y creo que esto todavía es cierto.


NO UTILICE keypress

  1. keypressevento es no desencadena cuando el usuario pulsa una tecla que no produce ningún carácter , tales como Tab, Caps Lock, Delete, Backspace, Escape, izquierdo y derecho Shift, teclas de función ( F1- F12).

    keypressevento Mozilla Developer Network

    El keypressevento se activa cuando se presiona una tecla , y esa tecla normalmente produce un valor de carácter . Úselo en su inputlugar.

  2. Ha quedado obsoleto.

    keypressevent UI Events (borrador de trabajo del W3C publicado el 8 de noviembre de 2018).

    • NOTA | El keypressevento se asocia tradicionalmente con la detección de un valor de carácter en lugar de una clave física , y es posible que no esté disponible en todas las claves en algunas configuraciones.
    • ADVERTENCIA | El keypresstipo de evento se define en esta especificación como referencia e integridad, pero esta especificación desaprueba el uso de este tipo de evento. En contextos de edición, los autores pueden suscribirse al beforeinputevento.

NO UTILICE KeyboardEvent.keyCode

  1. Ha quedado obsoleto.

    KeyboardEvent.keyCode Red de desarrolladores de Mozilla

    Desaprobado | Esta función ya no se recomienda. Aunque es posible que algunos navegadores aún lo admitan, es posible que ya se haya eliminado de los estándares web relevantes, que esté en proceso de ser eliminado o que solo se conserve por motivos de compatibilidad. Evite usarlo y actualice el código existente si es posible; consulte la tabla de compatibilidad al final de esta página para guiar su decisión. Tenga en cuenta que esta función puede dejar de funcionar en cualquier momento.


¿Qué debo usar entonces? (La buena práctica)

// Make sure this code gets executed after the DOM is loaded.
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;`.
});

que tal if (event.key == "Enter") { document.querySelector("#linkadd").click(); } :?
Anupam

2
Tenga en cuenta que .keyno es compatible con todos los navegadores: caniuse.com/#feat=keyboardevent-key : aproximadamente el 10% de las personas usa navegadores que no lo admiten.
Martin Tournoij

72

Hay una solución sin js.

Establezca type=submitel botón que le gustaría que sea predeterminado y type=buttonotros botones. Ahora, en el formulario a continuación, puede presionar Enter en cualquier campo de entrada, y el Renderbotón funcionará (a pesar de que es el segundo botón en el formulario).

Ejemplo:

    <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>

Probado en FF24 y Chrome 35 ( formactiones una función html5, pero typeno lo es).


17
solo funciona si está dentro de un formulario, el OP no está usando un formulario
Andrew

@Andrew Sí, me perdí eso. Ahora puedo verlo claramente, gracias.
dmitry_romanov

4
@Andrew, es cierto, pero es trivial en la mayoría de los casos envolverlo en una forma de no hacer nada ...
Stephen Chung

2
Además, esta solución funciona en el botón [Ir] del teclado virtual de iOS cuya acción predeterminada es enviar.
Elemental

10
  1. Reemplace el buttoncon unsubmit
  2. Sea progresivo , asegúrese de tener una versión del lado del servidor
  3. Vincula tu JavaScript al submitcontrolador del formulario, no al clickcontrolador del botón

Si presiona Intro en el campo, se activará el envío del formulario y se activará el controlador de envío.


6

Puede agregar un controlador de eventos a su entrada de la siguiente manera:

document.getElementById('addLinks').onkeypress=function(e){
    if(e.keyCode==13){
        document.getElementById('linkadd').click();
    }
}

2

Funciona cuando el tipo de entrada = "botón" se reemplaza con el tipo de entrada = "enviar" para el botón predeterminado que debe activarse.


1

En primer lugar, agregue el archivo de biblioteca jquery jquery y llámelo en su encabezado html.

y luego use código basado en jquery ...

$("#id_of_textbox").keyup(function(event){
    if(event.keyCode == 13){
        $("#id_of_button").click();
    }
});

1

Esto debería hacerlo, estoy usando jQuery, puedes escribir javascript simple.
Reemplace sendMessage()con su funcionalidad.

$('#addLinks').keypress(function(e) {
    if (e.which == 13) {
        sendMessage();
        e.preventDefault();
    }
});

1

Basado en algunas respuestas anteriores, se me ocurrió esto:

<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();
});

Eche un vistazo a Fiddle

EDITAR: Si no desea agregar elementos html adicionales, puede hacer esto solo con JS:

    $("input").keyup(function(event) {
        if (event.keyCode === 13) {
            $("button").click();
        }
    });     

0

Encontré w3schools.com howto, su página de prueba está en la siguiente.

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_trigger_button_enter

Esto funcionó en mi navegador habitual pero no funcionó en mi aplicación php que usa el navegador php integrado.

Después de jugar un poco, se me ocurrió la siguiente alternativa de JavaScript puro que funciona para mi situación y debería funcionar en cualquier otra situación:

    function checkForEnterKey(){
        if (event.keyCode === 13) {
            event.preventDefault();
            document.getElementById("myBtn").click();
        }
    }

    function buttonClickEvent()
    {
        alert('The button has been clicked!');
    }

HTML Presione la tecla Intro dentro del cuadro de texto para activar el botón.

    <br />
    <input id="myInput" onkeyup="checkForEnterKey(this.value)">
    <br />
    <button id="myBtn" onclick="buttonClickEvent()">Button</button>

-1
<input type="text" id="input_id" />    

$('#input_id').keydown(function (event) {
    if (event.keyCode == 13) { 
         // Call your function here or add code here
    }
});

-2

Estoy usando un botón de kendo. Esto funcionó para mí.

<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>
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.