3

Tenho um campo textarea e um botão "enviar" logo abaixo, e adicionei um evento onfocus e onblur nesse campo. O onfocus aumenta a altura do campo, e o onblur volta ao normal. Adicionei também um evento onclick no botão "enviar" para validar o campo textarea. Porém, o evento onblur está "anulando" no primeiro click o evento onclick do botão "enviar". O código é esse:

HTML:

<textarea id="meutexto"></textarea>
<br>
<div id="botao">
<input type="button" value="enviar" />
</div>

Script:

$("#meutexto")
.on('focus',function(){
    $(this).css('height','60px');
})
.on('blur',function(){
    $(this).css('height','30px');
});

$("#botao input").on('click',function(){
    $("#botao").html('Enviando texto...');
});

Acontece que ao clicar no botão "enviar" 1 vez, nada acontece. Só no segundo clique que a DIV "botao" é alterada para "Enviando texto...".

Caso eu pague as linhas:

.on('blur',function(){
    $(this).css('height','30px');
});

O script funciona. Porém eu não gostaria de retirar o onblur. O que será que está errado?

3 Respostas 3

2

É fácil de resolver, muito fácil, basta mudar onclick por onfocus, isto mesmo, use onfocus no button é tão simples, preste atenção que no css existe o :hover e o :focus

Quando vc passa o mouse sobre o elemento dispara o :hover, mas para disparar o :focus precisa selecionar(clicar) no elemento e mesmo depois de tirar o cursor de cima continua com o :focus diferente do hover, enfim ao usar onfocus no button você não terá problema nenhum pois o onfocus continua mesmo depois de mover o curso ou o elemento de debaixo do cursor.

E é onfocus mesmo tá, assim: <input type="button" value="funciona" onfocus="function()"/>

1

Faz isso com CSS, é um problema comum esse conflito de eventos.

$("#botao input").on('click', function() {
    $("#botao").html('Enviando texto...');
});
textarea {
    height: 30px;
    transition: height .5s;
}

textarea:focus {
    height: 60px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="meutexto"></textarea>
<br>
<div id="botao">
    <input type="button" value="enviar" />
</div>

2
  • 1
    Perfeito! Valeu!
    – Sam
    Commented 17/09/2016 às 19:50
  • @DavidFernandes ótimo que funcionou!
    – Sergio
    Commented 17/09/2016 às 20:01
0

Fiquei intrigado com o "conflito" de eventos, e testando alguns detalhes cheguei a conclusão que não se trata de conflito. Acontece que no windows se você clicar em um botão, arrastar o mouse para fora e largar, o click não sera efetivamente disparado, independente da aplicação, sempre terá esse "recurso" de desistir de um click.

Então se você fixar o botão no lugar ele não se arrasta para fora do mouse com o blur do textarea, o click será executado normalmente.

Que bom que resolveu com CSS puro, mas caso tivesse outras funções para executar no onblur, é bom saber como resolver...

$("#meutexto")
.on('focus',function(){
    $(this).css('height','60px');
})
.on('blur',function(){
    $(this).css('height','30px');
});

$("#botao input").on('click',function(){
    $("#botao").html('Enviando texto...');
});
div {
  height: 100px
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<textarea id="meutexto"></textarea>
</div>
<span id="botao">
<input type="button" value="enviar" />
</span>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .