javascript - Webpage slides up when soft keyboard is active - Stack Overflow

admin管理员组

文章数量:1356356

I've got a chat page layout web application with input at the bottom, and a header at the top. when the input is in focus the page moves up.

These headers are present in my page for preventing zoom or other unwanted behaviour.

<meta name="viewport" content="width=device-width,initial-scale=1">

When trying to resize the window using javascript using window.innerHeight but that doesn't work as well even with a setTimeout()

Is there a workaround for the browser to not pan the whole page up, or resize with subtracting height of keyboard?

I've got a chat page layout web application with input at the bottom, and a header at the top. when the input is in focus the page moves up.

These headers are present in my page for preventing zoom or other unwanted behaviour.

<meta name="viewport" content="width=device-width,initial-scale=1">

When trying to resize the window using javascript using window.innerHeight but that doesn't work as well even with a setTimeout()

Is there a workaround for the browser to not pan the whole page up, or resize with subtracting height of keyboard?

• javascript
• html
• css

Share Improve this question Follow asked Sep 4, 2018 at 4:53 SidharthSidharth 1,92522 gold badges1616 silver badges2424 bronze badges 7

• What is the oute you expect? – yqlim Commented Sep 4, 2018 at 7:35
• The oute is in the middle of the image I've attached. – Sidharth Commented Sep 4, 2018 at 7:46
• 3 Is position: fixed; not an option? The resources of your code that you've given are very limited. – Rick Commented Sep 12, 2018 at 8:32
• If position:fixed; isn't desirable to have all the time, one solution I have used is to add and remove the class on input focus and blur respectively. – FlightOfGrey Commented Sep 13, 2018 at 0:42
• 1 @Sparky I'll have a snippet added to the question. – Sidharth Commented Sep 14, 2018 at 8:37

 |  Show 2 more ments

4 Answers 4

Sorted by: Reset to default 2 +25

Starting in Safari 10, the keyboard height doesn't affect window.innerHeight. Source:

Safari and WKWebView on iOS 10 do not update the window.innerHeight property when the keyboard is shown.

As you've found, not only does this make correctly sizing an element to the display area quite difficult, but there is no resize event when the keyboard is opened.

Because the keyboard slides the entire page out the top of the viewport, you may be able to calculate the display height using the difference between the window's height and the page's scrollTop property. To detect when the keyboard is open or closed, listen for the onfocus and onblur events on your input.

var myInput = document.getElementById( "your-input-field-id" );
var myContainer = document.getElementById( "your-container-id" );

myInput.addEventListener( 'onfocus', function() {
    var displayHeight = window.innerHeight - myContainer.scrollTop;
    myContainer.style.height = displayHeight + "px";
}, true );

myInput.addEventListener( 'onblur', function() {
    myContainer.style.height = "100%";
}, true );

make a clone of header main element, and put it on the top of if whenever user focus into input would be a simplest answer.

$('#example').clone().addClass('cloned').prependTo('body');

However you must add unique class to that element, and give below css to that class,

.cloned {
    position:fixed;
    left:0;
    top:0;
    z-index:'give highest z-index';
}

have you tried <div> root </div> inside another <div> your_element </div>

I would advise you to use the position:fixed; top:0; on the header without creating clones.

本文标签： javascriptWebpage slides up when soft keyboard is activeStack Overflow