Onblur event cancels the onclick event in jQuery or in pure JavaScript

Question

Onblur event cancels the onclick event in jQuery or in pure JavaScript

Navigation

#1 by (2 votes)
#2 by (1 votes)
#3 by (0 votes)

3

I have a textarea field and a "submit" button just below, and added a onfocus and onblur event in that field. The onfocus increases the height of the field, and onblur returns to normal. I also added a onclick event on the "submit" button to validate the textarea field. However, the onblur event is "nulling" on the first click the onclick event of the "submit" button. The code is this:

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...');
});

It happens that by clicking the "submit" button 1 time nothing happens. Only in the second click that the% of% "button" is changed to DIV .

If I pay for the lines:

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

The script works. But I would not like to remove "Enviando texto..." . What is wrong?

javascript jquery

asked by anonymous 17.09.2016 / 21:43

3 answers

2

Easy to solve, very easy, just change onclick by onfocus, that is, use onfocus on the button is so simple, please note that in css there is hover and o: focus p>

When you hover over the element, hover, but to fire the: focus needs to select (click) on the element and even after you move the cursor from the top continues with the: focus different from hover, anyway when using onfocus on the button you will have no problem because the onfocus continues even after you move the cursor or the element from under the cursor.

And it's really onfocus, like this: <input type="button" value="funciona" onfocus="function()"/>

09.01.2018 / 18:07

0

I was intrigued by the "conflict" of events, and by testing a few details I came to the conclusion that it is not about conflict. It turns out that on windows if you click a button, drag the mouse out and drop, the click will not be effectively triggered, regardless of the application, will always have this "feature" to give up a click.

So if you fix the button in place it does not drag itself out of the mouse with the textarea blur, the click will run normally.

$("#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><textareaid="meutexto"></textarea>
</div>
<span id="botao">
<input type="button" value="enviar" />
</span>

18.09.2016 / 00:58

How to prevent a new instance of Activity from being created at each Intent Is there a reliable way to test your internet connection?

score 1 · Accepted Answer

Do this with CSS, this event conflict is a common problem.

$("#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><textareaid="meutexto"></textarea>
<br>
<div id="botao">
    <input type="button" value="enviar" />
</div>