Problem with the input click

Asked

Viewed 580 times

11

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

Below is the image of the problem. There was a click on the nickname, and what it opened was the birthday.

O Click no Apelido

I did a simulation in jsFiddle but it works perfectly.

https://jsfiddle.net/h12uro5b/

This is the function I do to manage clicks, I use this for the field that is focused, and the same is always 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 jquery android

  • Oops... how are you managing clicks? has a click function for each or you made a generic and makes a filter by clicking item id?

  • I updated the question

  • 1

    @Renanrodrigues there is nothing wrong with your code, this occurs with hybrid apps in general, because it has to do with the pixels of the screen, as you said only occurs in the first loading of the application, then does not occur anymore, I have the same problem with my app but until today without solution.

  • 1

    Have you tried not managing the Phocus? to test, because the Focus is fired before the click, and if in the mobile browser has a delay where it stores shoots the Focus, saves the position clicked and as vc moves the screen, the click is caught in the element below.

  • @Pauloroberto I develop apps using Ordova and never faced this kind of problem, does he manage it in any way? with what you develop?

  • develop with Intel XDK, but @Pauloroberto how can I do this ?

  • @h3nr1ke depending on the Framework you use and the amount of scripts on the page, it gets a little slow and takes time to make the first interpretation of the elements on the screen, the fault of this is the Webview of Android, I already researched a lot about it, but to this day I have not found a definitive solution. Renan I develop using Jquery Mobile, sometimes even Phonegap, sometimes Chocolate Ui, and Framework7, depends on the type of app and its features.

  • Someone else has the solution to the problem?

  • I noticed in the example that not all elements have id and name. Is it only in the example? For what I noticed the constriction only happens in 1º Focus when the page opens. Have you tried at the moment when the page opens to simulate 1º Focus? example.: https://jsfiddle.net/h12uro5b/4/ (the Focus1 variable is only to avoid running the entire Focus function the first time)

  • @Tiagogomes Probably simulate a click would solve my doubt, however it is something like a gambiarra, have to take into account that we are talking about a mobile application, and it is extremely ungainly to open the keyboard by opening a screen. But however it is only in the example that is missing.

  • It has all the rasão I forgot of the small and enormous detail that would be mobile and so would appear the keyboard. I added the jquery Blur function to take out the Focus that should fix this setback. Is this outdated? https://jsfiddle.net/h12uro5b/5/ I am not putting as an answer because it is not a solution is just a patch.

  • Managed to Resolve?

  • No, I’m just looking into this

Show 8 more comments

3 answers

1

It seems that the "scrollTop" is causing the strange behavior. Evaluate whether this automatic shift is really important because in general this is not the expected behavior when filling out form on a mobile phone.

EDIT: Fix Typo Error

1


If I understood correctly, I would try to do it in a totally different way just to test it. There are thousands of ways to do it. 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 relationship between them.

And I believe it is not a common problem of app hybrida. It is a matter of experience with javascript and its problems.

  • 1

    Daniel welcome to Stackoverflow. Here the questions and answer are done informally, so I edited your answer by withdrawing the greetings.

  • 1

    Okay, thank you. I’ll remember that.

0

Try to isolate jquery BIND 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);
   });
 });

Browser other questions tagged javascript jquery android

You are not signed in. Login or sign up in order to post.