Keypad behavior

[xkevin]

Is there a plugin or something that can make the keypad of andriod phone not covering the textbox?

It is awkward when typing on a textbox where in it is hiding behind the keypad. Give me guide please?

[Hamilton_Tenório_da_]

Look this post: https://software.intel.com/pt-br/forums/html5-application-development/topic/670426

Maybe it can solve.

[Hamilton_Tenório_da_]

I am using Framework7. For this framework I am using framework7.upscroller.min.js to help in this control.

[xkevin]

Thank you for that suggestion. I will try it later. I am also using framework7. Does it have built in framework7.upscroller.min.js. Or where I can get this script? 

[Hamilton_Tenório_da_]

I downloaded this library from internet and inserted in my js folder. I don´t remember where... If you don´t find, let me know and I send it to you.

[xkevin]

Hi Sir Hamilton, I have tried to do what you said but it seems it is not working. The text inputs that are hiding (when keypad is on) are on the very bottom of the page. The text input doesn't go on top of the keypad. Is it a bug in framework7?

This is the structure of my html.

   <div class="upage vertical-col left main-bg view-main view" id="mainpage">
      
        
              <!--Navigation-->
                <!-- Panels Overlay -->
                <div class="panel-overlay"></div>
                <div class="panel panel-left panel-reveal">
                    <div class="top-bar"></div>
                    <div class="nav-wrapper">
                        
                        <!-----Navigatin list----->

                          <ul class="has-navigation">
                            //some navigation here
                          </ul>
                      <!---End of Navigatin list--->
                                
                    </div>
                </div>
           <!--End Navigation-->

                <div class="views">
                    <div class="view view-main" data-page="home">
                        <div class="pages">
                            <div data-page="home" class="page navbar-fixed">
                                <div class="navbar">
                                    <div class="navbar-inner">
                                       
                                        <div class="center" style="left: 0px;"></div>
                                        <div class="right">
                                        
                                        </div>
                                    </div>
                                </div>

                                
                                <div class="page-content" >
                                    <div class="content-block">
                                        <div id="home-wrapper">
                                        <div class="wrapper-data">
                                               <div class="title-toggle">
                                                   <span class=title>My Profile</span>
                                               </div>
                                        //blah blah blah blah
                                         </div> 
 
                                        </div>
                                       
                                        <div id="profile-wrapper">
                                           <div class="wrapper-data">
                                               <div class="title-toggle">
                                                   <span class=title>My Profile</span>
                                               </div>
                                                                            <input type="password" name="inputnewpass" id="inputnewpass" class="textinput">

                                                                           <input type="password" name="inputnewpass" id="inputnewpass" class="textinput">

                                                                            </div>

                                                                     </div>

                                    </div> 
                                </div>

                            </div>
                            
                        </div>
                    </div>
                </div>
            </div>
      
      <script> 
        var myApp = new Framework7({
            swipePanel: 'left'
        });
      </script>   

[Hamilton_Tenório_da_]

@xkevin

Can you scroll manually this field to the top? If not, you need to add some space at the bottom page to be possible. Maybe there is no space to scroll. Try it.

Hamilton

[xkevin]

Yes, I added this space. something like 300px height. The input can now scroll up manually. The scrollTop doesn't work well, It will move the text input on top (has focused on input) but when the keypad shows up the text input will scroll down and hiding behind the keypad.

This is my sample code:

$("#inputnewpass").focus(function() { //show on top of keypad
                 $('.page-content').animate({
                scrollTop: $('#inputnewpass').offset().top 
                }, 'fast');
    });

[Hamilton_Tenório_da_]

Try something like that on focus:

$('#pagFormColecao').scrollTo(this , 800, { offset:-80 });

For me it is working like a charme.

[xkevin]

Sir hamilton, Is this the js library you are talking to? https://raw.githubusercontent.com/valnub/Framework7-Upscroller-Plugin/master/src/framework7.upscroller.js

I have tried what you said and this is now my code:

$('#inputnewpass').on('focus', function(){  
                    alert("scrolled");
                    $('#focuschangepassword').scrollTo(this , 800, { offset:-80 });
});

When I try to click the input the alertbox shows (means the onfocus was working), but the page is not scrolling at all. Why do you think it  is like that? I already added the js library on the script tag. But I am not sure if this is the library you are referring to me.

[xkevin]

Also I find that there is console log error: Uncaught TypeError: $(...).scrollTo is not a function 

[xkevin · Accepted solution]

I have tried another plugin library and it works smoothly now. I think there is bug on the library I've included. Now I have included this <script type="application/javascript" src="js/jquery-scrollto.js"></script>

And the code to scroll it to the top of the page is:

$('#inputpassword').ScrollTo(); 

Thank you for help.