uniapp 调起底部输入框textarea聊天页面被键盘顶起

本文转载自查看原文 2021-02-19 16:48 1537 uni-app开发问题

问题1:唤起底部输入框聊天内容被顶起

解决办法使用uniapp textarea 自带的:adjust-position="false"

问题2:底部textarea 键盘被调起之后输入框留在底部

解决办法:

// 监听键盘弹起高度 KeyboardHeight

uni.onKeyboardHeightChange(res=>{
 console.log('log',res);
 this.KeyboardHeight = res.height
})

在包裹输入框的最外层的标签写入

:style="'bottom:'+KeyboardHeight+'px;'"

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 移动端input输入框把页面顶起, 收起键盘页面复原不了问题 uniapp开发支付宝小程序，ios软键盘会把底部fixed定位的输入框覆盖掉有效解决方法移动端页面中点击input输入框的时候弹出的键盘将输入框挡住的问题

输入框提示文字
			           </a>
			       			       
			   
			       
			       
			           
			           <a class='list-group-item' href="/blog/ad483b1.html" title="微信公众号之input输入框获取焦点后,底部固定定位的按钮顶起问题解决办法">
			           
			           <i class="icon-file"></i>
			           微信公众号之input输入框获取焦点后,底部固定定位的按钮顶起问题解决办法
			           </a>
			       			       
			   
			       
			       
			           
			           <a class='list-group-item' href="/blog/5e0caa1.html" title="H5 App页面 绝对定位 软键盘弹出时顶起底部按钮">
			           
			           <i class="icon-file"></i>
			           H5 App页面 绝对定位 软键盘弹出时顶起底部按钮
			           </a>
			       			       
			   
			       
			       
			           
			           <a class='list-group-item' href="/blog/9683a81.html" title="H5页面关于android软键盘弹出顶起底部元素的解决方案">
			           
			           <i class="icon-file"></i>
			           H5页面关于android软键盘弹出顶起底部元素的解决方案
			           </a>
			       			       
			   
			       
			       
			           
			           <a class='list-group-item' href="/blog/597ac41.html" title="Mui WebApp页面 绝对定位 软键盘弹出时顶起底部按钮问题">
			           
			           <i class="icon-file"></i>
			           Mui WebApp页面 绝对定位 软键盘弹出时顶起底部按钮问题
			           </a>
			       			       
			   
			       
			       
			           
			           <a class='list-group-item' href="/blog/8b0b311.html" title="Android软键盘弹出，覆盖h5页面输入框问题">
			           
			           <i class="icon-file"></i>
			           Android软键盘弹出，覆盖h5页面输入框问题
			           </a>
			       			       
			   
			       
			       
			           
			           <a class='list-group-item' href="/blog/c75d9b1.html" title="css input,textarea 输入框光标颜色修改">
			           
			           <i class="icon-file"></i>
			           css input,textarea 输入框光标颜色修改
			           </a>
			       			       
			   
			   
			   <div id="right_float_ad" class="ad">
				</div>
			</div>
			</div>
		</div>
	</div>
    <div class="clear"> </div>

<div class="fbar" style="z-index:100">
	<div class="span7" style="color:grey;font-size:12px;">
	</div>
	<div class="pull-right">
		<span><a href="http://beian.miit.gov.cn" rel="nofollow" target="_blank">粤ICP备18138465号</a>  </span><span>© 2018-2025 CODEPRJ.COM </span> 
	</div>
</div>
<script src="/js/code.js?version=20251222"></script>
<script>
   function buffer(a, b, c) {
	    var d;
	    return function() {
	        if (d) return;
	        d = setTimeout(function() {
	            a.call(this),
	            d = undefined
	        },
	        b)
	    }
	}

(function() {
	    function e() {
	        var d = document.body.scrollTop || document.documentElement.scrollTop;
	        d > b ? (a.className = "div1 div2", c && (a.style.top = d - b + "px")) : a.className = "div1"
	    }
	    var a = document.getElementById("float");
	    if (a == undefined) return ! 1;
	    var b = 0,
	    c, d = a;
	    while (d) b += d.offsetTop,
	    d = d.offsetParent;
	    c = window.ActiveXObject && !window.XMLHttpRequest;
	    if (!c || !0) window.onscroll = buffer(e, 50, this)
	})();

</script>

</body>
</html>