[Solved] Mobile Keyboard overlapping over TextBox Bootstrap

Last Reply 3 months ago By nauna

Posted 3 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

You are viewing reply posted by: nauna 3 months ago.
Posted 3 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;
}