Problem with click on input

Question

Problem with click on input

Navigation

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

11

I'm developing a hybrid application for mobile, using HTML5 and JS. I have the following problem: when I click, for example, in Nickname, it opens the Sex part. However, it is very strange behavior, it only happens when it is the first time the field is opened, if the field is already focused, it proceeds correctly. Another situation that occurred: When I switch focus to another field, it works perfectly.

Below is the image of the problem. A nickname was clicked, and what he opened was his birthday.

ImadeasimulationinjsFiddlebutitworksperfectly.

link

This is the function I do to manage the clicks, I use this for the field that is focused, and it always stays at the top of the page.

 var inputs = $('input').get();
 $(inputs).on('focus', function () {
     var pos = $(this).offset(),
         posFinal = pos.top - 55;
     $(this).closest('.upage').scrollTop(posFinal);
   });

javascript android jquery

asked by anonymous 15.10.2015 / 14:47

3 answers

1

It seems that the "scrollTop" is causing the strange behavior. Consider whether this automatic offset is really important because this is generally not the expected behavior when filling out a form on a mobile.

EDIT: Correct typing error

24.02.2016 / 20:41

0

Try to isolate the BIND of jquery for each input:

 var inputs = $('input');
 $(inputs).each(function(){
   $(this).on('focus', function () {
     var pos = $(this).offset(),
         posFinal = pos.top - 55;
     $(this).closest('.upage').scrollTop(posFinal);
   });
 });

18.12.2015 / 20:43

Continuous integration and agile methodologies Reference loss in function call

score 1 · Accepted Answer

If I understood correctly, I would try to do it in a totally different way just to test. There are thousands of ways to do this. Example:

for (var i = 0; i < inputs.length; i++) {
  (function(input){
    input.addEventListener(focus, function(){
      //aqui o evento que vc quer disparar...
    }, true);
  })(inputs[i]);
};

The lambda function inside the loop helps to isolate the scope of the event, avoiding relation between them.

And I believe it's not a common hybrida app problem. And it's a matter of javascript experience and its problems.