[Solved] Mobile Keyboard overlapping over TextBox Bootstrap

Last Reply one year ago By nauna

Posted one year ago

hello,

 

i have responsive asp dot net web page, when user open it in mobile browser and try to type any thing in textbox mobile keyboard overlap textboxes

 

i want as user click in texbox screen auto adjust upward so mobile keyboard does not overlap form textboxes

Posted one year ago

here is the complete code, little bit trick and the code works perfectly.

<div id="test" tabindex="-1">
<textarea>Something</textarea>    
<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

var textareas = document.getElementsByTagName('textarea') || document.getElementsByTagName('input') || document.getElementsByTagName('select');

    for (i=0;i<textareas.length;i++){
        if (textareas[i].parentNode.tagName.toString().toLowerCase() == 'div') {
            textareas[i].onfocus = function(){
                this.parentNode.style.borderStyle = 'solid';
                this.parentNode.style.position = "absolute";
                this.parentNode.style.top = "0";
            }
            textareas[i].onblur = function(){
                this.parentNode.style.borderStyle = 'dashed';
                
            }
        }
    }

 

 

div {
    border: 2px dashed #f90;
    width: 100%;
    margin: 0 auto;
   
   
}

textarea {
    display: block;
    width: 100%;
    margin: 1em auto;
}