Press button with keyboard enter key

Asked

Viewed 3,477 times

11

I have a record button on my site, I would like to press the "Enter" key on the keyboard this button is triggered, as if it were a mouse click, there is some function to do this?

Button code:

<button type="reset" class="btn btn-primary btn-sucesso" onclick="parent.fecharJanelas('ListaBancos')"><i class="far fa-check-circle"></i> Gravar</button>

This button calls a function of a parent class, I want to click the enter the parent.fecharJanelas('ListaBancos') be executed

This is my button:

inserir a descrição da imagem aqui

Code: 

<button type="reset" class="btn btn-primary btn-atualizar" onclick="window.location.reload()"><i class="fas fa-undo-alt"></i> Atualizar</button>

<button type="reset" id="btnFecharJanelas" class="btn btn-primary btn-sucesso" onkeypress="parent.fecharJanelas('ListaBancos')"><i class="far fa-check-circle"></i> Gravar</button>

<button type="reset" class="btn btn-primary btn-sair" onclick="parent.fecharJanela('ListaBancos')"></button>

<button type="button" class="btn btn-primary btn-incluir button" onclick="parent.geradorCodigo('FrmGrdBanco', 'Tabela de Bancos', '/Bancos/Index', 980, 443);"></button>

<script>
    $(document).ready(function () {
        $(this.window).keypress(function () {
            $("#btnFecharJanelas").trigger("click");
        });
    });

    function selection_changed(selectedItems) {
        var data = selectedItems.selectedRowsData[0];
        if (data) {
            $('input[name="IdAgencia"]').val(data["Ban_Codigo"]);
            parent.codigoBanco = data["Ban_Codigo"];
            parent.nomeBanco = data["Ban_Nome"];
            parent.paginaBanco = data["Ban_Site"];
        }
    }




    function Cadastrar() {
        geradorCodigo("FrmGrdBanco", "Tabela de Bancos", "/Bancos/Index", 980, 443);
    }

</script>
javascript c# asp.net-mvc

4 answers

11

Below a way using Jquery:

Knob:

<button type="reset" id="btnFecharJanelas" class="btn btn-primary btn-sucesso" onkeypress="fecharJanelas('ListaBancos')"><i class="far fa-check-circle"></i>Gravar</button>

Jquery:

jQuery(document.body).on('keypress', function (e) {
    if (e.keyCode === 13) {
        e.preventDefault();
        $("#btnFecharJanelas").trigger("click");
    }
});

So anywhere in the document the user press Enter will call the button.

The e.keyCode === 13 indicates that the Enter key has been pressed

The e.preventDefault() prevents the making of a postback page

The ("#btnFecharJanelas").trigger("click"); calls the event click button

You can also define that this occurs in only one scope, such as a form, example:

jQuery(document.body).on('keypress', '#myForm', function (e) {
    if (e.keyCode === 13) {
        e.preventDefault();
        $("#btnFecharJanelas").trigger("click");
    }
});

  • Sorry for the delay, it is that I was involved elsewhere, this function is good, but, has a problem, I have to press the "record" button for only then I managed to press enter, I can not explain why, but tomorrow put the whole code in the question

8


It is quite possible using javascript only.

Using Keyboardevent

document.addEventListener('keydown', function(e) {
    if(e.key == "Enter"){
      document.getElementById("btFechar").click();
    }
});
<input type="button" id="btFechar" onclick="alert('Putz, alguém me bateu!');" />

Using onkeypress

function checkMyKey(e) {
  var keyCode;
  //  Browsers de verdade
  if(e.which){
    keyCode = e.which;
  }
  // Internet Explorer
  else if(window.event){
    keyCode = e.keyCode;
  }
  if (keyCode == 13) {
    document.getElementById("btFechar").click(); 
  }
}
<body onkeypress="return checkMyKey(event);">
  <input type="button" id="btFechar" onclick="alert('Putz, alguém me bateu!');" />
</body>

  • I liked using javascript, but any key I press calls the function

  • I updated the answer!

  • Now it is working only with the mouse click

  • Running on your page or using "Run" here? I tested both solutions and it’s cool (even in Microsoft Edge...)

  • I’m using the run right here, I use google Chrome, I will test in another browser

  • Strange, not even in the edge was, I will test in my project

  • 1

    Ah, sorry, my stupidity, your code solves my problem, thank you

Show 2 more comments

-1

document.addEventListener('keydown', function(e) {
    if(e.key == "Enter"){
      document.getElementById("btFechar").click();
    }
});
<input type="button" id="btFechar" onclick="alert('Putz, alguém me bateu!');" />

-2

Using Javascript only When the user presses the Enter key of the keyboard the function will be executed.

Any logic that is inside the function will be executed, in this example I put a simple warning

<!DOCTYPE html>
<html>
<body>

<button type="reset" onkeypress="btnFechar()"><i class="far fa-check-circle"></i>Gravar</button>

<script>

function btnFechar() {
  alert("Faz alguma coisa aqui");
parent.fecharJanelas('ListaBancos');
}
</script>

</body>
</html>

  • and how this code does what was asked "with the enter key on the keyboard"?

  • onkeypress works equally on onclick , but for when the user presses the Enter key, when you attach a function to that event, technically you can do any logic within that function, even call another function to be executed.

  • Antonio, your code at no time deals with pressing enter, nothing else does that connect to the event keypress, your answer still does not answer the main point of the question, perhaps so have some downvotes. Comment just to help you leave an answer that helps those who asked and also other users. Also include the explanation of the above comment you made in the question to improve understanding ;)

  • With onkeypress, I need to click the button first, only then to be able to press some key on the keyboard, and then any key that clicks performs the function, not what I wanted, but obg by the answer

Browser other questions tagged javascript c# asp.net-mvc

You are not signed in. Login or sign up in order to post.