PHP+Codeigniter - Teclas para Salvar (atalho)

[violin101 0]

Caros amigos, saudações.

Por favor, me perdoa em recorrer ao auxílio dos amigos, mas preciso entender e resolver um problema.

 

Tenho uma Rotina que o usuário seleciona os produtos que deseja para requerer ao setor responsável.
 

O usuário escolhe um produto qualquer e Clicla em um button para incluir a lista.

O problema que estou enfrentando é que após escolher o produto e teclar ENTER o Sistema já salva no BD.

 

Gostaria de criar uma Tecla de Atalho, para quando incluir/escolher o produto na lista, o usuário tecla como exemplo:
ALT+A  para agregar a lista
ALT+S para salvar a lista de itens desejados.

Assim, quando teclar enter, o sistema não dispara o GRAVAR na Base de Dados.

Grato,

Cesar

 

 

 

[violin101 0]

Caros amigos, saudações.

Fiz assim para Agregar o Item e aparentemente deu certo. 

        document.addEventListener("keydown", function(e){
          if (e.keyCode == 83){ //Teclas= CTRL+S
            e.preventDefault();          

            var idProdutos = document.getElementById("idProdutos").value;     
            var cod_interno = document.getElementById("cod_interno").value;     
            var descricao = document.getElementById("descricao").value;     

            //Verifica Duplicidade de Código
            if (verificar(idProdutos)) {
              //Chama a Modal com Alerta.
              $("#modal_mensagem").modal();
            }else{                           
                 html = "<tr>";
                 html += "<td width='10%' height='10' style='text-align:center;'><input type='hidden' name='id_prds[]' value='"+idProdutos+"'>"+idProdutos+"</td>";
                 html += "<td width='32%' height='10'><input type='hidden' name='descricao[]' value='"+descricao+"'>"+descricao+"</td>";
                 html += "<td width='10%' height='10' style='text-align:center;'>"+
                          "<button type='button' class='btn btn-danger btn-remove-produto' style='margin-right: 1%; padding: 1px 2px;' title='Remover Item da Lista'>"+
                          "<span class='fa fa-trash'></span></button></td>";                       
                 html += "</tr>";

                $("#tbventas tbody").append(html);

                $("#btn-agregar").val(null);
                $("#idProdutos").val(null);
                $("#descricao").val(null);                
                 
                $("#idProdutos").focus();

            }//Fim do IF-verificar
              
          }//Fim keyCode

        });//Fim function-keydown 

 

 

Mas como coloco no BUTTON que salva, para inibir o ENTER quando pressionado ?

                <button type="submit" id="adicionar" name="adicionar" class="btn btn-primary">
                    Adicionar
                </button>  

 

[Matheus Tavares 167]

Olá. Tudo joia?

 

Citar

como coloco no BUTTON que salva, para inibir o ENTER quando pressionado ?

Você tem duas opções:

 

1 - Escutar o evento do keydown, como você já fez anteriormente, mas dessa vez para a tecla Enter. Caso seja pressionada, você impede o comportamento padrão do navegador de enviar o formulário. Dessa forma o usuário ainda conseguiria enviar o form através do botão.

document.addEventListener( 'keydown', function( evt ) {
    if ( evt.key !== 'Enter' )
        return;// Não é Enter, portanto paramos aqui

    evt.preventDefault();
    // O navegador já foi interrompido. Aqui você pode fazer alguma coisa se quiser (por ex salvar)
} );

 

2 - Caso você não queira enviar o form de jeito nenhum, nem através do botão submit, ao invés de observar a tecla Enter, você deve observar a submissão do form para impedir o navegador. Assim:

// Observe que você precisa adicionar id="MeuForm" ao seu <form>
document.getElementById( 'MeuForm' ).addEventListener( 'submit', function( evt ) {
    evt.preventDefault();
    // O navegador já foi interrompido. Aqui você pode fazer alguma coisa se quiser (por ex salvar)
} );

 

 

Apenas mais uma dica. Seu código possui essa linha:

if (e.keyCode == 83){ //Teclas= CTRL+S

keyCode é uma propriedade obsoleta e não deveria ser utilizada. Veja: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode

 

Além disso você está verificando apenas se o keyCode bate com "83". Isso significa que ao pressionar "S" sem o ctrl, o if permite o prosseguimento do seu script.

Você poderia mudar para esse padrão:

document.addEventListener( 'keydown', evt => {
    if ( !evt.ctrlKey || evt.key !== 's' )
        return;// Não é Ctrl+S, portanto interrompemos o script
    
    evt.preventDefault();
    
    console.log( 'O usuário pressionou CTRL+S. Agora faço o que preciso fazer...' );
} );

Observe que ao invés de verificar se "É UM S", eu verifico se NÃO É UM CTRL+S, e caso NÃO SEJA eu interrompo o script.

Isso se chama early return e melhora a legibilidade do código, pois agora você pode retirar um nível de indentação de todo esse bloco e retirar essa linha também:

}//Fim keyCode

 

Espero ter ajudado :)

[violin101 0]

caro amigo Matheus, saudações.

 

obrigado por sua orientação, fiz o impedimento do uso da TECLA ENTER no form.

grato,

Cesar

[violin101 0]

saudações, amigo Matheus.

Referente sua orientação acima, como escrevo o salvar o formulário ?

document.addEventListener( 'keydown', function( evt ) {
    if ( evt.key !== 'Enter' )
        return;// Não é Enter, portanto paramos aqui

    evt.preventDefault();
    // O navegador já foi interrompido. 
    //Aqui você pode fazer alguma coisa se quiser (por ex salvar)
    /*
    *==> Como consigo colocar uma Tecla de Atalho aqui para salvar o Formulário
    */
} );

 

Grato,

Cesar

[Matheus Tavares 167]

Olá Cesar.

 

Citar

==> Como consigo colocar uma Tecla de Atalho aqui para salvar o Formulário

 

A forma mais simples seria criar uma função salvar() e chamá-la quando você precisar. Assim:

function salvar() {
    // Aqui você faz a rotina para salvar. Fetch API pode ser útil
}

Um usuário já implementou um ótimo exemplo da função salvar nesse tópico: https://forum.imasters.com.br/topic/589169-php-tecla-de-atalhos-para-salvar/

 

Agora você cria dois observadores (por exemplo) que irão chamar o salvar(). Um para o Enter e outro para o Ctrl+S:

 

Observador 1 (Enter):

document.addEventListener( 'keydown', function( evt ) {
    if ( evt.key !== 'Enter' )
        return;// Não é Enter, portanto paramos aqui

    evt.preventDefault();
    salvar();// Pressionado Enter. Vamos salvar...
} );

Observador 2 (Ctrl+S):

document.addEventListener( 'keydown', evt => {
    if ( !evt.ctrlKey || evt.key !== 's' )
        return;// Não é Ctrl+S, portanto interrompemos o script
    
    evt.preventDefault();
    salvar();// Pressionado Ctrl+S. Vamos salvar...
} );

 

Quanto Enter ou Ctrl+S forem pressionados, ambos irão chamar a função salvar.

Você poderia escrever tudo em um único observador, mas isso não seria uma boa prática. É melhor dividirmos as responsabilidades e cada observador executar uma tarefa.