Community
cancel
Showing results for 
Search instead for 
Did you mean: 
xkevin
New Contributor I
71 Views

Keypad behavior

Jump to solution

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?

Tags (2)
0 Kudos

Accepted Solutions
xkevin
New Contributor I
71 Views

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.

View solution in original post

0 Kudos
11 Replies
Hamilton_Tenório_da_
Valued Contributor I
71 Views

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

Maybe it can solve.

0 Kudos
Hamilton_Tenório_da_
Valued Contributor I
71 Views

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

0 Kudos
xkevin
New Contributor I
71 Views

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? 

0 Kudos
Hamilton_Tenório_da_
Valued Contributor I
71 Views

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.

0 Kudos
xkevin
New Contributor I
71 Views

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>   

 

0 Kudos
Hamilton_Tenório_da_
Valued Contributor I
71 Views

@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

0 Kudos
xkevin
New Contributor I
71 Views

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');
    });

 

0 Kudos
Hamilton_Tenório_da_
Valued Contributor I
71 Views

Try something like that on focus:

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

For me it is working like a charme.

 

0 Kudos
xkevin
New Contributor I
71 Views

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.

0 Kudos
xkevin
New Contributor I
71 Views

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

0 Kudos
xkevin
New Contributor I
72 Views

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.

View solution in original post

0 Kudos