CODEWITHSUNDEEP
javascriptjqueryjquery-mobile
merlin
merlin

Reputation: 2917

How to trigger on blur in jQuery with exception of clicking a button?

I have an input field wrapped within a jQuery mobile 1.4.5 environment which will scroll up on focus to provide space on mobile for search suggestions.

enter image description here

Upon filling out the field, it will scroll back down.

$('#refn').on('blur',function(){

  if ( (document.querySelector('.ui-input-clear-hidden') !== null) ) {
    $("html, body").animate({ scrollTop: 0}, 200);
  }

  return false;
});

JQM will provide a clear link on the right, which will clear the text field. This is a problem, as clicking it will defocus and trigger the scroll down function. Resulting in a scroll down and up again effect.

I tried to exclude it by recognizing the class .ui-input-clear-hidden but this has no effect. I believe because it is a link that takes away focus from the field.

<a href="#" tabindex="-1" aria-hidden="true" 
class="
 ui-input-clear 
 ui-btn 
 ui-icon-delete 
 ui-btn-icon-notext 
 ui-corner-all" 
title="Clear text">Clear text</a>

I want to trigger the function only if the clear button is not clicked. How can this be done?

Upvotes: 1

Views: 935

Answers (1)

Lo&#239;s PEYTOUREAU
Lo&#239;s PEYTOUREAU

Reputation: 51

If i understand, the issue is when you click on the clear text button, it execute your button that scroll down ?

I think you can try to get the focused element and if it's the clear button you do nothing

$('#refn').on('blur',function(){

  var focused_element = document.querySelector(':focus') ; //Get the focused element.
  if ( focused_element.hasClass('.ui-input-clear-hidden') ) {
    //It's the clear button
     return false;
  }else{
     //It's not your clear button
     $("html, body").animate({ scrollTop: 0}, 200);
  }
});

Edit :: try to store your clear_btn click in a var

//Function to force wait time
function timeout(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

var clear_btn_clicked = false;

//Event on click
$(document).on("click",function(){
     //You clicked on the X btn
     if( $(this).hasClass('ui-input-clear-hidden' ) ){
         clear_btn_cliked = true;
     }else{
         clear_btn_clicked = false;
     }
});


$('#refn').on('blur',function(){
  await timeout(500); //Wait 0.5s to let JS do the clear_btn click event
  if( clear_btn_clicked === false ){
    $("html, body").animate({ scrollTop: 0}, 200); //You didn't click on the X
  }else{
    return false; //You clicked on the X
  }
});

//You do same for your focus function
 $('#refn').on('focus',function(){
     await timeout(500); //Wait 0.5s to let JS do the clear_btn click event
     if( clear_btn_clicked === false ){
          //Scroll up
     }else{
          //Don't go up
     }
 });

Upvotes: 1

Related Questions