Created
June 2, 2016 06:20
-
-
Save ufologist/e9322fbaf975ded973addfc1bfbf3c86 to your computer and use it in GitHub Desktop.
手机上输入框(input/textarea)被弹出键盘遮挡的问题
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>手机上输入框(input/textarea)被弹出键盘遮挡的问题</title> | |
| <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> | |
| <style> | |
| html, | |
| body { | |
| height: 100%; | |
| overflow: hidden; | |
| } | |
| body { | |
| margin: 0; | |
| } | |
| p { | |
| margin: 0; | |
| } | |
| .container { | |
| /* 给输入框的容器添加 border 有可能导致输入框文字显示有延时 */ | |
| /* 出现的问题是: 你快速在输入框中输入文字, 输入框会显示空白一片, 直到你停止输入后才会显示出文字 */ | |
| /* 在快速删除时也会出现类似的延时现象 */ | |
| /* 去掉后明显就好了, 这个真是诡异啊... */ | |
| /*border: 1px solid #ccc;*/ | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <br> | |
| <div> | |
| <div> | |
| <p>影响输入框能否输入</p> | |
| <label><input type="checkbox" id="bodyRelativeCheckbox"> body relative</label> | |
| <label><input type="checkbox" id="containerWrapperRelativeCheckbox"> container-wrapper relative</label> | |
| </div> | |
| <div> | |
| <p>影响输入框能否出现在视野中</p> | |
| <label><input type="checkbox" id="scrollIntoViewCheckbox"> scrollIntoView</label> | |
| </div> | |
| <br> | |
| <br> | |
| </div> | |
| <div class="container-wrapper"> | |
| <p>container-wrapper</p> | |
| <textarea id="logTextarea" style="width: 100%; height: 50px;"></textarea> | |
| <button id="showResult">输入框被弹出键盘遮挡的结论</button> | |
| <div class="container" style="position: absolute; top: 250px; width: 100%;"> | |
| <p>container</p> | |
| <input type="text" placeholder="input:text"> | |
| <br> | |
| <textarea style="height: 15px;" placeholder="textarea"></textarea> | |
| </div> | |
| </div> | |
| <script> | |
| function log(text) { | |
| var el = document.querySelector('#logTextarea'); | |
| el.innerHTML = '\n' + Date.now() + ' ' + text; | |
| el.scrollTop = el.scrollHeight; | |
| } | |
| document.querySelector('#bodyRelativeCheckbox').addEventListener('change', function() { | |
| if (this.checked) { | |
| document.body.style.position = 'relative'; | |
| } else { | |
| document.body.style.position = ''; | |
| } | |
| }); | |
| document.querySelector('#containerWrapperRelativeCheckbox').addEventListener('change', function() { | |
| if (this.checked) { | |
| document.querySelector('.container-wrapper').style.position = 'relative'; | |
| } else { | |
| document.querySelector('.container-wrapper').style.position = ''; | |
| } | |
| }); | |
| document.querySelector('.container').addEventListener('click', function(event) { | |
| log(event.type + ':' + event.target); | |
| }); | |
| document.querySelector('.container').addEventListener('touchstart', function(event) { | |
| log(event.type + ':' + event.target); | |
| }); | |
| document.querySelector('input[type="text"]').addEventListener('focus', function() { | |
| if (document.querySelector('#scrollIntoViewCheckbox').checked) { | |
| // 确保输入框获得焦点后出现在视野内 | |
| // 如果不使用这个方法, 输入框可能被弹出的键盘挡住, 要看见输入框有两种方法 | |
| // 1. 用户输入文字后输入框才会出现在视野内 | |
| // 2. 滑动页面可以看见输入框 | |
| // 如果启用"防止滑动页面时导致露底"的功能, 会导致这个方法无效 | |
| this.scrollIntoView(); | |
| } | |
| }); | |
| document.querySelector('textarea[placeholder="textarea"]').addEventListener('focus', function() { | |
| if (document.querySelector('#scrollIntoViewCheckbox').checked) { | |
| this.scrollIntoView(); | |
| } | |
| }); | |
| document.querySelector('#showResult').addEventListener('click', function() { | |
| alert('* 输入框元素的层级中只要有一个父级元素使用 position: relative 就会导致输入框无法输入\n* 而且还会导致 click 事件无法触发\n* 即使使用 scrollIntoView 也没有办法让输入框正常使用\n* 测试手机 iPhone5 iOS 7.0.6 存在这个问题\n* 测试手机 iPhone SE iOS 9.3.2/iPhone 6s iOS 9.3.2/iPhone5s iOS 8.1.2/HUAWEI G750-T20 Android 4.4.2 没有这个问题') | |
| }); | |
| // 防止滑动页面时导致露底 | |
| // window.addEventListener('touchmove', function(event) { | |
| // event.preventDefault(); | |
| // }); | |
| </script> | |
| </body> | |
| </html> |
Author
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
手机上输入框(input/textarea)被弹出键盘遮挡的结论