Ir para conteúdo

POWERED BY:

Elisame Araújo

Retorno de Dados dentro de um Lightbox

Recommended Posts

Seguinte, estou criando uma página dinâmica para um site de clã de jogos e essa página vai listar todos os membros. Até aí, tudo bem, eu consegui buscar dentro do banco de dados os nomes dos membros, mas, quando preciso com que uma div que abre um lightbox com resumo do perfil do membro, acaba retornando apenas o resultado referente a primeira ID, no caso a 1. O que rola é todos os membros, ficam com a mesma informação de resumo curto e UF, por exemplo, mesmo que no banco de dados isso seja individual. Para explicar melhor:

 

Este código, busca os membros e algumas colunas no banco de dados.

    $conecta = mysqli_connect($servidor,$usuario,$senha,$banco);

    if(mysqli_connect_errno())
    {
        die("Falha ao se conectar com: " . mysqli_connect_errno());
    } 
	
        //Consulta Membros
    
        $membros = "SELECT m.id, m.nick, m.estado, m.idstatus, m.resumocurto, m.resumolongo, m.data_cadastro, m.canalyt, assalto, medico, suporte, atirador, pilotoaviao, tanque, pilotoheli ";
        $membros .= " FROM membros as m ";
        $membros .= " JOIN afinclasse as af ";
        $membros .= " on m.id = af.id ";
        $membros .= " where af.id and m.id ";
        $resultados = mysqli_query($conecta,$membros);

        if(!$resultados)
        {
            die("Falha na consulta de dados. A coluna da tabela selecionada não existe ou seu nome está incorreto.");
        }
    ?>

Que em seguida são exibidos dentro de:

<h3 style="margin-top: 25px;"><strong>Membros Ativos</strong></h3>
			<div class="agileinfo-team-grids">
            <?php
            while($membros = mysqli_fetch_assoc($resultados))
            { ?>
            		<!--- INÍCIO---->
					<div class="col-md-3 wthree-team-grid usuario-foto">
					<img src="images/profile-pic/pic-temp.png" alt="" />
					<h4><a href="perfil.php?usuario=<?php echo $membros['nick'] ?>"><?php echo $membros['nick'] ?></a> #<?php echo $membros['id'] ?><br>
					<span class="badge-membro">Membro</span>
                    </h4>
                    

                    <div class="badge alinhamento-mais"><a href="#" data-toggle="modal" data-target="#adbr_killer">Resumo</a></div>
                    
                  
				</div>
                <div class="modal about-modal fade" id="adbr_killer" tabindex="-1" role="dialog">
						<div class="modal-dialog" role="document">
							<div class="modal-content">
								<div class="modal-header"> 
									<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>						
									<h4 class="modal-title">Resumo Rápido</h4>
								</div> 
								<div class="modal-body">
									<div class="agileits-w3layouts-info">
                                      <p><strong>Apresentação Curta:</strong> <?php echo $membros["resumocurto"] ?></p>
										<p><strong>Estado:</strong> <?php echo $membros['estado'] ?></p>
                                        <p><strong>Classe Preferida:</strong> Médico <img src="images/classes/medic.png" width="26" class="alinhamento-estado"></p>
                                        <p><strong>Jogos:</strong>
                                        
                                        <div class="Qtip">
                                         <img src="images/jogos/bf2.png" width="26" class="alinhamento-estado">
                                         <span class="Qtiptext">Battlefield 2</span>
                                         </div>
                                        <div class="Qtip">
                                         <img src="images/jogos/bf3.png" width="26" class="alinhamento-estado">
                                         <span class="Qtiptext">Battlefield 3</span>
                                         </div>
                                        <div class="Qtip">
                                         <img src="images/jogos/bf4.png" width="26" class="alinhamento-estado">
                                         <span class="Qtiptext">Battlefield 4</span>
                                         </div>
                                        <div class="Qtip">
                                         <img src="images/jogos/bf1.png" width="26" class="alinhamento-estado">
                                         <span class="Qtiptext">Battlefield 1</span>
                                         </div>
                                        <div class="Qtip">
                                         <img src="images/jogos/bfv.png" width="26" class="alinhamento-estado">
                                         <span class="Qtiptext">Battlefield V</span>
                                         </div>
                                        </p>
                                        <p><strong>Patente na Platoon:</strong> Cabo</p>
									</div>
								</div>
							</div>
						</div>
					</div>
                    <!--- FIM ---->
</div>

Porém, quando dentro deste código em específico (abaixo), no caso, que abre um lightbox, ele repete os dados da ID 1 do BD, não seguindo, pra ID 2, ID 3, etc.

No caso são as variáveis "resumocurto" e "estado" que se repetem igualmente para todos.

<div class="modal about-modal fade" id="adbr_killer" tabindex="-1" role="dialog">
						<div class="modal-dialog" role="document">
							<div class="modal-content">
								<div class="modal-header"> 
									<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>	
									<h4 class="modal-title">Resumo Rápido</h4>
								</div> 
								<div class="modal-body">
									<div class="agileits-w3layouts-info">
                             <p><strong>Apresentação Curta:</strong> <?php echo $membros["resumocurto"] ?></p>
							 <p><strong>Estado:</strong> <?php echo $membros['estado'] ?></p>
                             <p><strong>Classe Preferida:</strong> Médico <img src="images/classes/medic.png" width="26" class="alinhamento-estado"></p>
                             <p><strong>Jogos:</strong> "Lista de Jogos"</p>
                             <p><strong>Patente na Platoon:</strong> Cabo</p>

O mais engraçado é, quando eu faço essa busca dentro de uma lista <ul> ou <ol>, ele retorna os dados normalmente para cada perfil.

				<ul>
                <li>Nick: <?php echo $membros["nick"] ?> <strong>#<?php echo $membros["id"] ?></strong></li>
                <li>Ativo: <?php echo $membros["idstatus"] ?></li>
                <li>Estado: <?php echo $membros["estado"] ?></li>
                <li>Resumo Curto: <?php echo $membros["resumocurto"] ?></li>
                <li>Resumo Longo: <?php echo $membros["resumolongo"] ?></li>
                <li>Assalto: <?php echo $membros["assalto"] ?></li>
                <li>Médico: <?php echo $membros["medico"] ?></li>
                <li>Suporte: <?php echo $membros["suporte"] ?></li>
                <li>Atirador: <?php echo $membros["atirador"] ?></li>
                <li>Piloto de Avião: <?php echo $membros["pilotoaviao"] ?></li>
                <li>Tanque: <?php echo $membros["tanque"] ?></li>
                <li>Piloto de Heli: <?php echo $membros["pilotoheli"] ?></li>
                <li>Canal Youtube: <a href="<?php echo $membros['canalyt'] ?>" target="_blank">Link</a></li>
                <li>Adicionado Em: <?php echo date('d-m-Y / H:i:s', strtotime($membros['data_cadastro'])) ?></li>
                </ul>

Existe alguma limitação no PHP para ele exibir dados numa DIV que abre a partir de um lightbox? Porque ele só retorna esses dados normalmente através de uma lista? O que eu preciso modificar no código em si para fazer com que ele apareça normalmente?

 

Não sei se ficou claro...

Compartilhar este post


Link para o post
Compartilhar em outros sites
17 horas atrás, Elisame Araújo disse:

Existe alguma limitação no PHP para ele exibir dados numa DIV que abre a partir de um lightbox?

Não e sim depende da velocidade de conexão de quem o php vai entregar o HTML renderizado.

 

17 horas atrás, Elisame Araújo disse:

Porque ele só retorna esses dados normalmente através de uma lista?

O que você se refere quando diz: lista?

 

17 horas atrás, Elisame Araújo disse:

O que eu preciso modificar no código em si para fazer com que ele apareça normalmente?

Praticamente nada se usar as informações já disponíveis de sua query.

 

Existem 3 formas de exibir mais detalhes sobre algo em específico.

1 - Ao abrir o modal executar um ajax em algum arquivo que fará a leitura novamente no banco em busca do alvo em questão (As alternativas abaixo são melhores).

2 - Varrer o documento em busca das informações que serão usadas e replicar no modal. (Mais simples)

3 - Levar toda array que veio do banco de dados para o javascript, então usar essas informações para definir o que será mostrado no modal. (como eu prefiro fazer)

 

Segue o exemplo de como realizar a operação 3

Spoiler

<?php
$membros = [
    ['id' => 0, 'nick' => 'Nick A', 'estado' => 'Estado A', 'idstatus' => 'idStatus A'],
    ['id' => 1, 'nick' => 'Nick B', 'estado' => 'Estado B', 'idstatus' => 'idStatus B'],
    ['id' => 2, 'nick' => 'Nick C', 'estado' => 'Estado C', 'idstatus' => 'idStatus C'],
    ['id' => 3, 'nick' => 'Nick D', 'estado' => 'Estado D', 'idstatus' => 'idStatus D'],
    ['id' => 4, 'nick' => 'Nick E', 'estado' => 'Estado E', 'idstatus' => 'idStatus E']
];

foreach ($membros as $value) {
    ?>
    <p>Nome: <?= $value['nick'] ?>
       <button onclick="verDetalhes('<?= $value['id'] ?>')">Ver tudo</button>
    </p>
    <?php
}
?>

<div id="mostar_detalhes" style="display: none">
    <hr />
    <p data-id=""></p>
    <p data-nick=""></p>
    <p data-estado=""></p>
    <p data-idstatus=""></p>
</div>    

<script>
    var arrayDoPHP = JSON.parse('<?= json_encode($membros) ?>');

    function verDetalhes(indiceDoClick) {
        var numero = parseInt(indiceDoClick),
            mostrar = document.getElementById('mostar_detalhes');

        mostrar.querySelector('[data-id]').innerText = arrayDoPHP[numero].id;
        mostrar.querySelector('[data-nick]').innerText = arrayDoPHP[numero].nick;
        mostrar.querySelector('[data-estado]').innerText = arrayDoPHP[numero].estado;
        mostrar.querySelector('[data-idstatus]').innerText = arrayDoPHP[numero].idstatus;

        mostrar.style.display = 'block';
    }
</script>

 

 

Simples usamos a função no php json_encode para transformar o array em uma string, assim essa string pode ser manipulada no javascript.

Só que na capsula usamos o JSON.parse que irá transformar a string em array.

Na pratica é converter o array do php em um array compatível com javascript.

Uma vez que temos todos os dados disponíveis no javascript, bastando clicar no botão chamando um função que irá pegar o índice do click e comparar com o índice do array.

No mais é só ir exibindo os dados.

Compartilhar este post


Link para o post
Compartilhar em outros sites

É um pouco mais simples do que parece rs...

Esqueci de citar no caso, que estou aprendendo ainda o PHP como um todo, então é um pouco mais complicado pra mim entender

 

Citar

Não e sim depende da velocidade de conexão de quem o php vai entregar o HTML renderizado.

Me refiro a se existe alguma limitação em questão de funcionar em uma div oculta, porque aparentemente quando não uso o retorno dentro de um lightbox, ele traz os resultados normalmente.

 

Citar

O que você se refere quando diz: lista?

No caso, uma lista não ordenada ou ordenada, que usei como exemplo para renderizar esses dados. 

A minha dúvida é porque ele não carrega esses dados dentro da lightbox...

 

Vou pegar um exemplo prático com alguns prints:

 

Esse é o usuário de ID = 1 no meu banco de dados. Eu coloquei uma lista ordenada do lado direito apenas para ficar visível quais são os dados que estou puxando de dentro do BD.

image.thumb.png.aba602c7fa4f241826ff35d2d0dccc03.png

 

Ao clicar no botão resumo, ele, apresenta esse lightbox com um resumo rápido do usuário, como por exemplo, uma pequena apresentação (Apresentação Curta) e o Estado de onde o usuário é:

image.png.d452acec36286928ef931a4d2f8ca8e8.png

 

Essas duas primeiras prints se referem ao usuário de ID = 1.

 

Agora se eu for para um usuário de ID = 4, o lightbox vai exibir as mesmas informações do carinha do ID = 1. Por exemplo:

 

image.png.2e08c7b25d924690ff370b3e122bab99.png

 

Esse é o meu problema rs... Independente do ID que está dentro do BD, os dados enviados para o LIGHTBOX e exclusivamente ele, são iguais para todos. Enquanto se eu uso ele fora, esses dados são retornados normalmente.

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Por onde começo?!....

 

Hun... O caso da lista: Possivelmente o problema está na estrutura HTML (algum erro). Pois independente de tag's usadas a repetição de um loop é executada, se for o caso em cada volta do loop o erro/incoerência é repetido.

 

Como você pode fazer a coisa dar certo:

Primeiramente o seu elemento "LIGHTBOX" deve ficar fora do laço do loop no caso seu é o while.

Citar

Não aconselho o uso de while para varredura de arrays, pois é muito propício a falhas.

foreach é um recurso próprio para arrays.

 

O seu lightbox aí contará com toda arquitetura HTML crua ou seja, ele vai ser todo definido o que cada local vai ter porém não vai ter informação alguma.

Assim sendo quando você o exibir povoe esses campos usando o javascript para tal finalidade.

Vou mostrar um exemplo de como você pode obter esses dados do html já renderizado e adicionar em outro local. (Só vou fazer uma linha, nas demais é só repetir a lógica)

Em 29/10/2020 at 20:32, Elisame Araújo disse:

<ul> <li>Nick: <?php echo $membros["nick"] ?> <strong>#<?php echo $membros["id"] ?></strong></li>

 

Veja:

Spoiler

<button onclick="abrirLightBox('<?= $membros['id'] ?>')">Exemplo</button> <!-- Qual ID vamos mostrar os dados -->
<ul id="sai_daqui_<?= $membros['id'] ?>"> <!-- use o ID para diferenciar cada usuário -->
    <?php /*
     * "<?=" é o mesmo que "<?php echo" só que consome menos memória do servidor
     * A tag <strong> só é uma tag usual para HTML 4 ou anteriores
      <li>Nick: <?php echo $membros["nick"] ?> <strong>#<?php echo $membros["id"] ?></strong></li>
     */ ?>
    <li>
        Nick: <span data-nick=""><?= $membros['nick'] ?></span>
        <span style="font-weight: bold">#<?= $membros['id'] ?></span>
    </li>
</ul>

<!-- No seu lightbox -->
<div id="vem_para_aqui">
    <span data-nick=""></span>
</div>

<script>
    /*
     * Essa função será responsável também em mostrar seu lightbox
     */
    function abrirLightBox(id_do_usuario) {
        /*
         * O pulo do gato!
         * Através do parâmetro "id_do_usuario" sabemos onde buscar as informações
         * de cada usuário em questão
         */
        var procurarEm = document.getElementById('sai_daqui_' + id_do_usuario);

        /* 
         * Local onde vamos povoar as informações
         */
        var colocarEm = document.getElementById('vem_para_aqui');

        /*
         * Obtemos o texto do primeiro local
         */
        var nick = procurarEm.querySelector('[data-nick]').innerText;

        /*
         * colocamos o texto em outro local
         */
        colocarEm.querySelector('[data-nick]').innerText = nick;
    }
</script>

 

No contexto eu prefiro a minha opção anterior de levar o array do PHP para o javascript.

O que dar no mesmo a única diferença é que agora tem que ficar consultando o documento para encontrar o que mostrar.

 

Sua questão é extremamente simples. Nada mais do que manipular o html das 3 maneiras que citei antes com javascript e para tal existem incontáveis maneiras de o fazer, mas no fim será sempre exibir algo em um local específico.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Não sei hoje em dia quais são as limitações do PHP, haja vista que se faz praticamente de tudo com esta linguagem, "Laravel + Livewire é um exemplo disso". Geralmente as limitações vem do desenvolvedor, ignoram as documentações etc, isto independente da linguagem.


Existe uma regra básica para o uso de seletores "ID" com javascript, ele não pode se repetir ou sempre vai pegar o primeiro seletor na DOM, ainda mais sendo todos iguais. Se abrir seu código HTML gerado em algum depurador de JS, verás que sinalizara, que há ID´s duplicadas no documento.

Seu problema está aqui:

<div class="badge alinhamento-mais"><a href="#" data-toggle="modal" data-target="#adbr_killer">Resumo</a></div>

e aqui:

<div class="modal about-modal fade" id="adbr_killer" tabindex="-1" role="dialog">

Mesmo ID para todas as repectivas modais. E este não é o jeito correto para uso de modais, mas resolve. Pesquise por modal + ajax.


Solução para seu caso.
Concatene como id quem vem do banco no loop, deixando o único.
Desta forma:

<div class="badge alinhamento-mais"><a href="#" data-toggle="modal" data-target="#adbr_killer_<?php echo $membros["id"] ?>">Resumo</a></div>
<div class="modal about-modal fade" id="adbr_killer_<?php echo $membros["id"] ?>" tabindex="-1" role="dialog">

Ou seja, o problema não é o php, ele fez oque você pediu para fazer, o javascript que não sabe que outros dados existem, pois está tudo com o mesmo ID. 

Compartilhar este post


Link para o post
Compartilhar em outros sites
5 horas atrás, Williams Duarte disse:

Não sei hoje em dia quais são as limitações do PHP, haja vista que se faz praticamente de tudo com esta linguagem, "Laravel + Livewire é um exemplo disso". Geralmente as limitações vem do desenvolvedor, ignoram as documentações etc, isto independente da linguagem.


Existe uma regra básica para o uso de seletores "ID" com javascript, ele não pode se repetir ou sempre vai pegar o primeiro seletor na DOM, ainda mais sendo todos iguais. Se abrir seu código HTML gerado em algum depurador de JS, verás que sinalizara, que há ID´s duplicadas no documento.

Seu problema está aqui:


<div class="badge alinhamento-mais"><a href="#" data-toggle="modal" data-target="#adbr_killer">Resumo</a></div>

e aqui:


<div class="modal about-modal fade" id="adbr_killer" tabindex="-1" role="dialog">

Mesmo ID para todas as repectivas modais. E este não é o jeito correto para uso de modais, mas resolve. Pesquise por modal + ajax.


Solução para seu caso.
Concatene como id quem vem do banco no loop, deixando o único.
Desta forma:


<div class="badge alinhamento-mais"><a href="#" data-toggle="modal" data-target="#adbr_killer_<?php echo $membros["id"] ?>">Resumo</a></div>

<div class="modal about-modal fade" id="adbr_killer_<?php echo $membros["id"] ?>" tabindex="-1" role="dialog">

Ou seja, o problema não é o php, ele fez oque você pediu para fazer, o javascript que não sabe que outros dados existem, pois está tudo com o mesmo ID. 

Era exatamente esse o problema! VALEU MESMO CARA!

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 daemon
      Boa tarde,
       
      Eu tenho uma rotina que faz uma leitura do arquivo .xml de vários sites.

      Eu consigo pegar o tópico e a descrição, e mostrar a imagem que esta na pagina do link.
      Para isso utilizo esta função:
      function getPreviewImage($url) { // Obter o conteúdo da página $html = file_get_contents($url); // Criar um novo objeto DOMDocument $doc = new DOMDocument(); @$doc->loadHTML($html); // Procurar pela tag meta og:image $tags = $doc->getElementsByTagName('meta'); foreach ($tags as $tag) { if ($tag->getAttribute('property') == 'og:image') { return $tag->getAttribute('content'); } } // Se não encontrar og:image, procurar pela primeira imagem na página $tags = $doc->getElementsByTagName('img'); if ($tags->length > 0) { return $tags->item(0)->getAttribute('src'); } // Se não encontrar nenhuma imagem, retornar null return null; } // Uso: $url = "https://example.com/article"; $imageUrl = getPreviewImage($url); if ($imageUrl) { echo "<img src='$imageUrl' alt='Preview'>"; } else { echo "Nenhuma imagem encontrada"; }  
      Mas estou com um problema, esta funcão funciona quando coloco em uma pagina de teste.php. Preciso mostrar em uma página inicial diversas fotos de todos os links. (No caso acima só funciona 1).
    • 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
×

Informação importante

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