解決移動端輸入法遮蓋input輸入框的問題…

2024-09-05 12:21:40

字體：大中小

來源：轉載

供稿：網友

一般的原生的系統里面并沒有這個bug，但是第三方往往會出現

解決辦法原理是通過給body添加scrollTop，把input的位置挪到最上面就可以了，

另一種通用方法是使用fixed定位到頂部，是可以解決，但是下面的內容會暴露出來，雖然通過嵌套一層能解決，而且脫離文檔流，可能有樣式問題，無疑又麻煩了,下面是真的第一種辦法解決的demo

<html><head>    <meta charset="utf-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">    <title>Examples</title>    <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" name="viewport">    <meta name="description" content="">    <meta name="keywords" content="">    <link href="" rel="stylesheet"><style type="text/css">    *{margin:0px; padding: 0px;}    body,html{ padding: 5px;}    .scrollDiv{width: 100%;height: 900px;background: #ccc;font-size: 24px;padding-top: 40px; text-align: center;}    input{-webkit-appearance: none;width: 100%; display: block;margin:10px auto; border-radius: 0px;font-size: 16px; padding: 12px 10px;box-sizing:border-box;box-shadow: none;border:1px solid #666; }</style></head><body style="">    <div   id="iwvjtn8m0"   class="main">        <div   id="iwvjtn8m0"   class="scrollDiv">滑到最下面</div>        <input type="text" placeholder="點擊我" id="inp">    </div><script type="text/javascript">var inp = document.querySelector('#inp'); var bodyHeight =  document.body.offsetHeight ; inp.onclick = function(ev){    document.querySelector('body').style.height = '9999px';    setTimeout(function(){        document.body.scrollTop = document.documentElement.scrollTop = inp.getBoundingClientRect().top + pageYOffset -5;    },50);    window.addEventListener('touchmove',fn,false); }inp.onblur = function(){    document.querySelector('body').style.height="auto"    document.querySelector('body').removeAttribute('style')    window.removeEventListener('touchmove',fn,false)}//觸摸取消blurfunction fn(ev){    var _target = ev.target || ev.srcElement;      if(_target.nodeName != 'INPUT') {inp.blur();}    ev.preventDefault()};</script></body></html>

上一篇：霓虹燈文字代碼 JS網頁特效

下一篇：響應鼠標變換表格背景或者顏色