Ir para conteúdo

POWERED BY:

violin101

PHP+Codeigniter - Teclas para Salvar (atalho)

Recommended Posts

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

 

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

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>  

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por violin101
      Caros amigos, saudações.
       
      Por favor, me permita tirar uma dúvida com os amigos.

      Tenho um Formulário onde o Usuário digita todos os Dados necessários.

      Minha dúvida:
      --> como faço após o usuário digitar os dados e salvar, o Sistema chamar uma Modal ou mensagem perguntando se deseja imprimir agora ?

      Grato,
       
      Cesar
    • Por Carcleo
      Tenho uma abela de usuarios e uma tabela de administradores e clientes.
      Gostaria de uma ajuda para implementar um cadastro
       
      users -> name, login, passord (pronta) admins -> user_id, registratiom, etc.. client -> user_id, registratiom, etc...
      Queria ajuda para extender de user as classes Admin e Client
      Olhem como estáAdmin
      <?php namespace App\Models; use Illuminate\Database\Eloquent\Factories\HasFactory; use Illuminate\Database\Eloquent\Model; class Admin extends User {     use HasFactory;            protected $fillable = [         'name',         'email',         'password',         'registration'     ];      private string $registration;     public function create(         string $name,          string $email,          string $password,         string $registration     )     {         //parent::create(['name'=>$name, 'email'=>$email, 'password'=>$password]);         parent::$name = $name;         parent::$email = $email;         parent::$password = $password;         $this->registration = $registration;     } } User
      <?php namespace App\Models; // use Illuminate\Contracts\Auth\MustVerifyEmail; use Illuminate\Database\Eloquent\Factories\HasFactory; use Illuminate\Foundation\Auth\User as Authenticatable; use Illuminate\Notifications\Notifiable; use Illuminate\Database\Eloquent\Relations\BelongsToMany; class User extends Authenticatable {     /** @use HasFactory<\Database\Factories\UserFactory> */     use HasFactory, Notifiable;     static string $name;     static string $email;     static string $password;     /**      * The attributes that are mass assignable.      *      * @var list<string>      */     protected $fillable = [         'name',         'email',         'password',     ];          /**      * The attributes that should be hidden for serialization.      *      * @var list<string>      */     protected $hidden = [         'remember_token',     ];     /**      * Get the attributes that should be cast.      *      * @return array<string, string>      */     protected function casts(): array     {         return [             'email_verified_at' => 'datetime',             'password' => 'hashed',         ];     }          public function roles() : BelongsToMany {         return $this->belongsToMany(Role::class);     }       public function hasHole(Array $roleName): bool     {                 foreach ($this->roles as $role) {             if ($role->name === $roleName) {                 return true;             }         }         return false;     }         public function hasHoles(Array $rolesName): bool     {                 foreach ($this->roles as $role) {             foreach ($rolesName as $rolee) {             if ($role->name === $rolee) {                 return true;             }          }         }         return false;     }         public function hasAbility(string $ability): bool     {         foreach ($this->roles as $role) {             if ($role->abilities->contains('name', $ability)) {                 return true;             }         }         return false;     }     } Como gravar um Admin na tabela admins sendo que ele é um User por extensão?
      Tentei assim mas é claro que está errado...
      public function store(Request $request, Admin $adminModel) {         $dados = $request->validate([             "name" => "required",             "email" => "required|email",             "password" => "required",             "registration" => "required"         ]);         $dados["password"] =  Hash::make($dados["password"]);                  $admin = Admin::where("registration",  $dados["registration"])->first();                  if ($admin)              return                    redirect()->route("admin.new")                             ->withErrors([                                 'fail' => 'Administrador já cadastrados<br>, favor verificar!'                   ]);                            $newAdmin = $adminModel->create(                                    $dados['name'],                                    $dados['email'],                                    $dados['password'],                                    $dados['registration']                                 );         dd($newAdmin);         $adminModel->save();         //$adminModel::create($admin);                  return redirect()->route("admin.new")->with("success",'Cadastrado com sucesso');     }  
    • Por violin101
      Caros amigos, saudações.
       
      Gostaria de tirar uma dúvida com os amigos, referente a PDV.
       
      Estou escrevendo um Sistema com Ponto de Vendas, a minha dúvida é o seguinte, referente ao procedimento mais correto.

      Conforme o caixa vai efetuando a venda, o Sistema de PDV já realiza:
      a baixa direto dos produtos no estoque
      ou
      somente após concretizar a venda o sistema baixa os produtos do estoque ?
       
      Grato,
       
      Cesar
       
    • Por violin101
      Caros amigos do grupo, saudações e um feliz 2025.
       
      Estou com uma pequena dúvida referente a Teclas de Atalho.

      Quando o Caps Lock está ativado o Comando da Tecla de Atalho não funciona.
      ou seja:
      se estiver para letra minúscula ====> funciona
      se estiver para letra maiúscula ====> não funciona
       
      Como consigo evitar essa falha, tanto para Letra Maiúscula quanto Minúscula ?

      o Código está assim:
      document.addEventListener( 'keydown', evt => { if (!evt.ctrlKey || evt.key !== 'r' ) return;// Não é Ctrl+r, portanto interrompemos o script evt.preventDefault(); });  
      Grato,
       
      Cesar
    • Por violin101
      Caros amigos, saudações.
       
      Por favor, poderiam me ajudar.

      Estou com a seguinte dúvida:
      --> como faço para para implementar o input código do produto, para quando o usuário digitar o ID o sistema espera de 1s a 2s, sem ter que pressionar a tecla ENTER.

      exemplo:
      código   ----   descrição
           1       -----   produto_A
       
      Grato,
       
      Cesar
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.