1 Reply Latest reply on Jan 4, 2012 5:20 AM by Benedict Kennedy

    Avoid textbox hidde when display android keyboard

      Hello,

       

      I want to know which is the best practice to show a textbox when android keyboard appears. In a few words, watch what you write in a RhoElement Applications on Android.

       

      Thanks,

       

      Gustavo

        • Re: Avoid textbox hidde when display android keyboard
          Benedict Kennedy

          Hi Gustavo,

           

          In my apps, I have written some functions that scroll the page to the input box when the input box is given focus. It also adds a space at the bottom of the page which will be obscured by the keyboard.

           

          This way, the text box is always visible when focused.

           

          Any questions, dont hesitate to ask.

           

          Ben.

           

          <html>
                    <head>
                              <style>
                                        #spacerDiv
                                        {
                                                  height: 400px; /* Maximum height of the keyboard */
                                        }
                              </style>
                              <script type="text/javascript">
                                        window.onload = function()
                                        {
                                                  //Get an array of all of the input boxes on the page.
                                                  var x = document.getElementsByTagName("input");
          
                                                  //Add onfocus and onblur functions to all input boxes.
                                                  for(var i = 0; i < x.length; i++)
                                                  {
                                                            //onfocus is called when an input box gains focus
                                                            x[i].onfocus = function()
                                                            {
                                                                      //add an extra empty section at the bottom,
                                                                      //so that if the input box is at the bottom
                                                                      //of the page, there will be enough page space
                                                                      //for the input box to scroll to a position
                                                                      //above the keyboard.
                                                                      var body = document.getElementsByTagName('body')[0];
                                                                      var spacerDiv = document.createElement('div');
                                                                      spacerDiv.setAttribute('id','spacerDiv');
                                                                      body.appendChild(spacerDiv);
          
                                                                      //Scroll the page so that the input box is at
                                                                      //the top of the screen.
                                                                      var position = getPosition(this);
                                                                      window.scrollTo(position.x,position.y);
                                                            };
          
                                                            //onblur is called when a input box loses focus
                                                            x[i].onblur = function()
                                                            {
                                                                      //Removes the spacer from the page
                                                                      var body = document.getElementsByTagName('body')[0];
                                                                      var spacerDiv = document.getElementById('spacerDiv');
                                                                      body.removeChild(spacerDiv);
                                                            };
                                                  }
                                        };
          
                                        /**
                                         * Returns the position on the screen of the object
                                         * @param the object of which to get the position
                                         * @return {x,y} the x and y positions of the top left of the object
                                         *          in relation to screen size
                                         */
                                        function getPosition(object)
                                        {
                                                  var xPosition = 0;
                                                  var yPosition = 0;
                                                  while(object != null)
                                                  {
                                                            xPosition += object.offsetLeft;
                                                            yPosition += object.offsetTop;
                                                            object = object.offsetParent;
                                                  }
                                                  return {x: xPosition, y: yPosition};
                                        }
          
                                        /**
                                         * Quits the RhoElements app.
                                         */
                                        function quit()
                                        {
                                                  application.quit();
                                        }
                              </script>
                    </head>
                    <body>
                              <!-- Example WebPage -->
                              <h1>Always visible text box example</h1>
                              <h2>Focus a text box to test the page</h2>
                              <button onclick="javascript:quit()">Quit</button></br>
                              <label for="input1">1:</label><input name="input1"></input><br />
                              <label for="input2">2:</label><input name="input2"></input><br />
                              <label for="input3">3:</label><input name="input3"></input><br />
                              <label for="input4">4:</label><input name="input4"></input><br />
                              <label for="input5">5:</label><input name="input5"></input><br />
                              <label for="input6">6:</label><input name="input6"></input><br />
                              <label for="input7">7:</label><input name="input7"></input><br />
                              <label for="input8">8:</label><input name="input8"></input><br />
                              <label for="input9">9:</label><input name="input9"></input><br />
                              <label for="input10">10:</label><input name="input10"></input><br />
                              <label for="input11">11:</label><input name="input11"></input><br />
                              <label for="input12">12:</label><input name="input12"></input><br />
                              <label for="input13">13:</label><input name="input13"></input><br />
                              <label for="input14">14:</label><input name="input14"></input><br />
                              <label for="input15">15:</label><input name="input15"></input><br />
                              <label for="input16">16:</label><input name="input16"></input><br />
                              <label for="input17">17:</label><input name="input17"></input><br />
                              <label for="input18">18:</label><input name="input18"></input><br />
                              <label for="input19">19:</label><input name="input19"></input><br />
                    </body>
          </html>