uni-app 原生plus.nativeObj.view的drawinput 键盘弹起时弹起两个键盘的高度
uni-app 原生plus.nativeObj.view的drawinput 键盘弹起时弹起两个键盘的高度
示例代码：
let test1 = new plus.nativeObj.View('test',
{bottom:'0px',left:'0px',height:'44px',width:'100%',backgroundColor: '#FF0000'});
test1.draw([
{tag:'input',id:'input',inputStyles:{fonstSize:'16px'},position:{top:'0px',left:'0px',width:'100%',height:'20px'}},
{tag:'font',id:'font',text:'原生控件',textStyles:{size:'18px'}}
]);
test1.show();
操作步骤：
- https://www.html5plus.org/doc/zh_cn/nativeobj.html#plus.nativeObj.InputStyles
- 用的代码示例也是这样
- 昨天还好好的 今天一打开就成这样了
预期结果：
- 红色的input区域在键盘的上方 页面没有设置softinputMode 默认为adjustPan
实际结果：
- input的位置是对的 因为能看到文本提示
- 但是红色的父级区域在两个键盘的高度上 页面上移的高度也是对的
bug描述：
- 原生input弹起来顶起这么高是为什么 而且实际的input的位置是对的
| 信息类别 | 信息内容 |
|----------------|------------------|
| 产品分类 | uniapp/App |
| PC开发环境 | Windows |
| PC开发环境版本 | win7 |
| 开发工具 | HBuilderX |
| 开发工具版本 | 3.0.7 |
| 手机系统 | Android |
| 手机系统版本 | Android 10 |
| 手机厂商 | OPPO |
| 手机机型 | PACM00 |
| 页面类型 | vue |
| 打包方式 | 云端 |
| 项目创建方式 | HBuilderX |
更多关于uni-app 原生plus.nativeObj.view的drawinput 键盘弹起时弹起两个键盘的高度的实战教程也可以访问 https://www.itying.com/category-93-b0.html
27 回复
view.setStyle(styles);
这个方法也是 外层控件位置变了 input的位置 没有改变
更多关于uni-app 原生plus.nativeObj.view的drawinput 键盘弹起时弹起两个键盘的高度的实战教程也可以访问 https://www.itying.com/category-93-b0.html
<template>
<view>
<button @tap="draw">创建 </button>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
draw() {
let test1 = new plus.nativeObj.View('test', {
bottom: '0px',
left: '0px',
height: '44px',
width: '100%',
backgroundColor: '#FF0000'
});
test1.draw([{
tag: 'input',
id: 'input',
inputStyles: {
fonstSize: '16px'
},
position: {
top: '0px',
left: '0px',
width: '100%',
height: '20px'
}
},
{
tag: 'font',
id: 'font',
text: '原生控件',
textStyles: {
size: '18px'
}
}
]);
test1.show();
}
}
}
</script>
<style>
</style>
pages.json 配置
{
“path” : “pages/comp/test”
}
<template>
<view>都开始合肥市科技加思考了</view>
<view class="inputBox">
<input type="text">
</view>
</template>
<script>
export default {
}
</script>
<style>
.inputBox{
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 80upx;
background-color: #fff;
}
</style>
nvue页面 输入框点击 效果
这个问题是由于Android系统的软键盘弹起机制与原生控件布局的交互导致的。根据你的描述，实际input位置正确但父容器被顶起过高，可能是以下原因：
- 系统默认的adjustPan模式在处理原生控件时可能存在兼容性问题
- 原生View的布局计算与系统键盘弹起高度计算产生了叠加
建议尝试以下解决方案：
// 1. 明确设置softinputMode
plus.navigator.setSoftinputMode("adjustPan");
// 2. 修改原生View的创建方式
let test1 = new plus.nativeObj.View('test', {
bottom: '0px',
left: '0px',
height: '44px',
width: '100%',
backgroundColor: '#FF0000'
});
// 3. 添加键盘事件监听
plus.key.addEventListener('hide', function(){
test1.setStyle({bottom:'0px'});
});
plus.key.addEventListener('show', function(e){
test1.setStyle({bottom:e.height+'px'});
});