Safari click != focus on radio button

Question

The Question

How can I make a hidden div (triggered by radio button) show/hide for people that click it or tab through it in all browsers (Safari is my problem).

The Story

I have an html form with hidden div's scattered throughout to hide questions that might not need to be asked in some scenarios. Most of the hidden div's are triggered by radio buttons, so I decided to build the following script. I used .on("focus") so the hidden fields will work for people tabbing through the form.

$("#loan-application").on("focus","input.toggler,span.toggler", function(){
  var $show = ($(this).data("show")) ? $($(this).data("show")) : false,
      $hide = ($(this).data("hide")) ? $($(this).data("hide")) : false;
  if($show){    
    $show.stop(true).show({animation: "blind", duration: 1000}).addClass("active");
    if($show.data("validate")) $show.find(":visible:input.mandatory").addClass("required");
  }
  if($hide){
    $hide.not($show).each(function(){
      var $this = $(this);
      $this.stop(true).hide({animation: "blind", duration: 1000}).removeClass("active");
      ($this.data("validate")) ? $this.find(":input.mandatory").removeClass("required") : $this.find(":input.mandatory").addClass("required");
      resetForm($this);
    });
  }    
});

This code accomplishes the task in all browsers except Safari. If the radio button is clicked in Safari, it does not "count as focus" and the hidden field is not shown. So I tried switching the event to fire .on("click focus") which kind of works; however, if there are additional hidden divs within a previously hidden div, the content of the additional divs will expand outside of the parent into other text because the parents height does not change with the additional hidden divs.

any chance we could see a fiddle? the explanation is a bit fuzzy... — Pevara, Aug 12 '14 at 19:59
@JeremyJStarcher This works, but it does fire the .focus() event twice on click. I shall use it for now until I can find a more efficient way. — Neve12ende12, Aug 12 '14 at 21:51

score 0 · Answer 1 · edited May 23 '17 at 12:05

0

You can create click handler set focus.

Inside the click handler, you can use document.activeElement to determine if the element has focus already.

More information here: How do I find out which DOM element has the focus?

edited May 23 '17 at 12:05

Community

1
1

answered Aug 12 '14 at 21:59

Jeremy J Starcher

23,369
6
54
74

1

I was able to solve my problem by changing .on("focus") to .on("change") – Neve12ende12 Aug 12 '14 at 22:08

Safari click != focus on radio button

1 Answers1