[Solved] Mobile Keyboard overlapping over TextBox Bootstrap

Last Reply 11 months ago By nauna

Posted 11 months 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 11 months 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;
}