How to call a function in javascript by Android keyboard enter?

Question

Good night. I’m studying and I really need three things, but if you can help with just one, that’s good, I tried to search and applied many tips from various websites but I was not successful. I need the button "Enter (arrow) inside Android"call the specific function inside the button "search". if I set the button to "input button" enter does nothing and if I just set it to "button" enter gives error page. Summarizing the javascript code searches inside the object array by the cancel number of the list and prints in a table. Note. the code works but here I could not run.

1 - centralize H1 - could not get on the screen of Android 9 2 - bring Section left - 3 - question = make the android enter button call the function

<script type = "text/javascript">


const lista = [
{loja:100,cancelamento:123,atendimento:'Autorização Nº1077229',data: '01/01/2020',
 status:'Resolvido'
},

{loja:200,cancelamento:456,atendimento:'Enviado para Administradora',data: '02/02/2020',
status:'Resolvido'
},

{loja:300,cancelamento:789,atendimento:'Não é permitido cancelamento parcial',data: '03/03/2020',
status:'Aguardando Filial'

}
]    

/*
cancelamento.addEventListener("keyup", function(event) {
event.preventDefault();
if (event.keyCode === 13) {
    buscar();
}
}); */

function handleEnterKeyPress() {
    console.log('Enter key pressed')
  }
  
  window.addEventListener('keyup', event => {
    console.log(event.code, event.key);
    
    if (event.code === 'NumpadEnter' || event.code === 'Enter')
      buscar();
  });

function buscar() {
        
var cancelamento = document.getElementById('cancelamento')
let buscar = Number(cancelamento.value)
let result = document.getElementById('res')
let listagem = document.getElementById('listagem')
let table = document.getElementById('table')




    

const procurar = lista.find( obj => obj.cancelamento === buscar )//buscar 
        console.log( procurar )   
        console.log(`lista ${lista}`)
        console.log(buscar)
        console.log(lista[0].atendimento)
        console.log("testando" + typeof(procurar))
        console.log("testando" + typeof(lista))


if(procurar != undefined){
    
   document.getElementById('loja').innerText = "Loja"
   document.getElementById('cancelamentoTabela').innerText = "Cancelamento"
   document.getElementById('atendimento').innerText = "Atendimento"
   document.getElementById('data').innerText = "Data"
   document.getElementById('status').innerText = "Status"

    var lojaRes = document.getElementById("lojaRes")
    var cancelamentoRes = document.getElementById('cancelamentoRes')
    var atendimentoRes = document.getElementById("atendimentoRes")
    var dataRes = document.getElementById("dataRes")
    var statusRes = document.getElementById("statusRes")
                 
   document.getElementById('lojaRes').innerText = procurar.loja
   document.getElementById('cancelamentoRes').innerText = procurar.cancelamento
   document.getElementById('atendimentoRes').innerText = procurar.atendimento
   document.getElementById('dataRes').innerText = procurar.data
   document.getElementById('statusRes').innerText = procurar.status
   
   console.log("testando" + typeof(procurar.status))
   if (procurar.status == "Aguardando Filial") 
    { statusRes.style.backgroundColor = '#FF0000';}

    else 
    { statusRes.style.backgroundColor = '#32CD32';}

   listagem.innerText = " "
   var div = document.getElementById('div')
   div.style.display = 'block';
   cancelamento.focus()
   document.getElementById('cancelamento').Number = ""
            
}if (procurar == undefined) {
    listagem.innerText = "Cancelamento não localizado!"
    var div = document.getElementById('div')
    div.style.display = 'none';
    cancelamento.focus()
    document.getElementById('cancelamento').Number = ""
    
}   
          
}

var button = document.getElementById('button')
button.addEventListener('click',mudaBackground);
function mudaBackground() {
thead.style.backgroundColor = "rgb(85, 167, 221)";
thead.style.border = "2px solid black";
lojaRes.style.border = "2px solid black";
cancelamentoRes.style.border = "2px solid black";
atendimentoRes.style.border = "2px solid black";
dataRes.style.border = "2px solid black";
statusRes.style.border = "2px solid black";

document.getElementById('loja').style.border = "2px solid black";
document.getElementById('cancelamentoTabela').style.border = "2px solid black";
document.getElementById('atendimento').style.border = "2px solid black";
document.getElementById('data').style.border = "2px solid black";
document.getElementById('status').style.border = "2px solid black";

console.log(procurar)
if (procurar.status = "Aguardando Filial") {
{ statusRes.style.backgroundColor = '#FF0000';
}
}else { statusRes.style.backgroundColor = '#32CD32';}

}
  




</script>

<!DOCTYPE html>
<html lang="pt-BR">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Cancelamento</title>
  <link rel="stylesheet" href="https://sites.google.com/site/cancelamentocreddvol/estilo.consulta.css">

</head>
<header>
  <h1 class="h1" id="h1">Consulta Cancelamento</h1><br>
</header>

<body>

  <section class="section" id="section">
    <div>
      <input type="number" class="cancelamento" name="cancelamento" id="cancelamento" autofocus="cancelamento"><input type="button" class="buscar" value="buscar" onclick="buscar();mudaBackground();" id="button">

    </div>

    <div id="res" class="res">

      <strong> <p id="listagem"></p> </strong>

    </div>

    <div id="div">
      <p id="listagem2">
        <table class="table" id="table">
          <thead class="thead" id="thead">
            <th id="loja" class="th"></th>
            <th id="cancelamentoTabela" class="th"></th>
            <th id="atendimento" class="th"></th>
            <th id="data" class="th"></th>
            <th id="status" class="th"></th>
          </thead>
          <tbody class="tbody">
            <td id="lojaRes" class="td"></td>
            <td id="cancelamentoRes" class="td"></td>
            <td id="atendimentoRes" class="td"></td>
            <td id="dataRes" class="td"></td>
            <td id="statusRes" class="td"></td>
          </tbody>
        </table>

      </p>
    </div>

  </section>
</body>

</html>

Answer 1

You can use the Keyboardevent, probably the best option is Event keyup, because it will be fired only once even if the user keeps the key pressed. Then just check which key was pressed through the properties code or key

function handleEnterKeyPress() {
  console.log('Enter key pressed')
}

window.addEventListener('keyup', event => {
  console.log(event.code, event.key);
  
  if (event.code === 'NumpadEnter' || event.code === 'Enter')
    handleEnterKeyPress();
});

Answer 2

The solution unfortunately not found here in Stackoverflow but I thank the Costamilam who gave a north and adjusted the code, I believe that everything was going for some reason in the declaration of the input button where I changed from "input type="button"" for just one button and removed the type and took the input and button from inside a form that was the last one that did not let the keyboard event enter to call the functions. I tried to align the input and button in the container but could not center it on the page.

But try another question

https://tfnicolau.github.io/finalized