uniapp弹出软键盘获取键盘高度不准确，显示输入框

最新推荐文章于 2024-07-17 17:00:29 发布
最新推荐文章于 2024-07-17 17:00:29 发布
阅读量1.2w 收藏 36
点赞数 6
分类专栏： 小程序 Uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hahahhahahahha123456/article/details/115874529
版权
本文介绍了在uniapp中如何处理输入框弹出时底部元素无法准确跟随键盘高度的问题。通过uniapp的onKeyboardHeightChange接口获取键盘高度，并结合getSystemInfo获取的屏幕信息来计算实际的定位高度，从而解决安卓和ios上存在的间距问题。此外，还提供了解决iPhone键盘隐藏时高度为0导致的负值问题，以及避免内存泄漏的注意事项。另外，文中还提到了方法二，即直接使用textarea的adjust-position属性，实现输入框自动跟随键盘。
摘要由CSDN通过智能技术生成

方法一

1、问题背景

　　在评论或者发布内容时经常会用到这样的设计，输入框弹起，然后底部定位的一块区域（通常用于选择一些附加信息，比如图片、话题、表情等）也随之弹起，定位在软键盘上方方便用户选择。但是一般点击输入框，软键盘自动弹起，就会覆盖掉底部定位的元素，而我们是需要底部定位的元素跟随软键盘一起弹起的，这样就方便用户输入的时候也可以选择其他附加信息。

2、我们可以通过uniapp提供的接口获取到软键盘的高度

　　uni.onKeyboardHeightChange(CALLBACK)：监听键盘高度变化，返回参数就是：{ height: number类型，键盘高度 }

　　可以获取到键盘高度，然后修改定位的bottom即可。

3、遇到问题

　　当我获取键盘高度定位时，发现底部定位的元素总是跟软键盘间隔一段距离。安卓和ios手机均是如此。就如这样：

4、问题原因

　　这是因为手机屏幕底部存在虚拟键位，虚拟键位是占了软键盘高度，占了屏幕高度，但是不占屏幕可使用窗口高度的

5、解决方案

　　知道了原因，其实问题就很好解决了。

　　uni.getSystemInfo(OBJECT)：获取系统信息。

　　我们可以通过该接口获取到系统信息里的：screenHeight（屏幕高度）、windowHeight（可使用窗口高度）

　　两者相减即为虚拟键位高度：keyHeight = screenHeight - windowHeight

　　然后获取到的软键盘高度 减去 虚拟键位高度即可得到定位的高度

setKeyHeight(obj) {
　　let _sysInfo = uni.getSystemInfoSync()
　　let _heightDiff = _sysInfo.screenHeight - _sysInfo.windowHeight
　　let _diff = obj.height - _heightDiff
　　this.keyHeight = _diff > 0 ? _diff : 0

　　在iphone上有这样的问题，就是上面的obj.height在键盘隐藏时为0，这个时候就会出现负值，所以需要判断下

6、注意内存泄漏

　　使用了uni.onKeyboardHeightChange(CALLBACK)：监听键盘高度变化，注意需要使用uni.offKeyboardHeightChange(CALLBACK)：取消监听键盘高度变化事件，避免内存消耗。

demoCode:

<template class="comment-page">
	<div class="comment-component">
		<div
			class="comment-write"
			:style="{
				bottom: inputWrapHeight
			}"
		>
			<div class="comment-input">
				<textarea
					:maxlength="maxlength"
					placeholder-style="color:#9796A9"
					:placeholder="`评论一下…`"
					@focus="inputFocus"
					@keyboardheightchange="keyboardheightchange"
					@blur="inputBlur"
					hold-keyboard="true"
					auto-blur="true"
					adjust-position="false"
					show-confirm-bar="false"
					ref="inputRef"
					fixed="true"
					:focus="focus"
					:disabled="disabled"
					@input="inputChange"
				/>
			</div>
			<div class="comment-send">
				<span class="content-num">剩余{{ calcNums }}字</span>
				<div class="send-btn" @click="sendComment">发送</div>
			</div>
		</div>
	</div>
</template>
<script>
export default {
	data() {
		return {
			maxlength: 100,
			focus: false,
			inputWrapHeight: '0px',
			disabled: false,
			calcNums: 100,
			platform: 'android',
			systemInfo: {},
			Keyboard: 0, // 键盘高度
			targetNode: null,
			machineHeight: 0
		};
	},
	methods: {
		inputChange(e) {
			if (!e.detail) return;
			this.calcNums = this.maxlength - e.detail.value.length;
		},
		sendComment() {
			this.focus = false;
		},
		inputFocus(e) {
			let that = this;
			let { screenHeight, screenWidth, statusBarHeight, windowHeight } = this.systemInfo;
			this.machineHeight = screenHeight - windowHeight; // 虚位高度
			let dp = screenWidth / screenHeight;
			if (e) {
				let { height } = e.detail; // 获取键盘高度
				if (height) this.inputWrapHeight = `${(height) * dp}px`;
			}
		},
		inputBlur() {
			this.inputWrapHeight = 0;
		},

		keyboardheightchange(e) {
			console.log(e);
		},

		show() {},
		hide() {},
		calcMaskHeight() {
			let that = this;
			let targetNode = uni.createSelectorQuery().select('.comment-component'); // 获取某个元素
			targetNode
				.boundingClientRect(function(data) {
					// console.log(data.height.toFixed(2)); // 获取元素宽度
					that.inputWrapHeight = data.height;
				})
				.exec();
		}
	},
	mounted() {
		let that = this;
		// this.calcMaskHeight();

		const info = wx.getSystemInfoSync();
		console.log(info);
		if (info) this.platform = info.platform;
		this.systemInfo = info;
	}
};
</script>
<style lang="scss" scoped>
.comment-component {
	font-family: PingFang-SC-Regular, PingFang-SC;

	// width: 100vw;
	// height: 100vh;
	// height: 100%;
	background: transparent;
	background: rgba(0, 0, 0, 0.8);
	// background: red;
	z-index: 99999;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	// top: -10000px;
	.comment-write {
		position: absolute;
		bottom: 0;
		// top: 0;
		width: 100vw;
		height: 160px;
		background: #fff;
		display: flex;
		flex-direction: column;
		.comment-input {
			// width: 335px;
			width:calc(100% - 40px);
			height: 85px;
			background: #f7f8fa;
			margin: 15px auto;
			textarea {
				width: 100%;
				height: 100%;
				padding: 10px;
				font-size: 14px;
				font-weight: 400;
				color: #333;
			}
		}
		.comment-send {
			padding: 0 20px;
			height: 60px;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			.content-num {
				font-size: 12px;
				font-weight: 400;
				color: #b4b2c0;
			}
			.send-btn {
				cursor: pointer;
				width: 65px;
				height: 30px;
				@include flexCenter;
				background: #000000;
				border-radius: 2px;
				font-size: 14px;
				font-weight: 400;
				color: #ffffff;
			}
		}
	}
}
</style>

方法二

不需要计算键盘的高度，让输入框自动跟随键盘顶上去( 兼容 ios,android )

使用 textarea 核心属性adjust-position="true"  cursor-spacing="140"  disable-default-padding="true"

让 cursor-spacing 与输入框高度相同即可

代码案例：

<template class="comment-page">
  <div class="comment-component" v-show="showVisiable" @click="touchOther">
    <div
      class="comment-write"
      :style="{
        bottom: inputWrapHeight,
      }"
      @click.stop="noDefault"
    >
      <div class="comment-input">
        <textarea
          :maxlength="maxlength"
          placeholder-style="color:#9796A9"
          :placeholder="`${placeholder}`"
          @focus="inputFocus"
          @keyboardheightchange="keyboardheightchange"
          @blur="inputBlur"
          hold-keyboard="true"
          auto-blur="true"
          adjust-position="true"
          :cursor-spacing="cursorSpacing"
          disable-default-padding="true"
          show-confirm-bar="false"
          ref="inputRef"
          fixed="true"
          :focus="focus"
          :disabled="disabled"
          @input="inputChange"
          :value="writeContent"
        />
      </div>
      <div class="comment-send">
        <span class="content-num">剩余{{ calcNums }}字</span>
        <div
          class="send-btn"
          @click="sendComment"
          :class="{ disabled: !writeContent }"
        >
          发送
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      maxlength: 100,
      focus: false,
      inputWrapHeight: "0px",
      disabled: false,
      platform: "android",
      systemInfo: {},
      Keyboard: 0, // 键盘高度
      targetNode: null,
      showVisiable: false,
      writeContent: "",
      callback: null,
      placeholder: "评论一下…",
      cursorSpacing:140,
    };
  },

  computed: {
    calcNums() {
      return this.maxlength - this.writeContent.length;
    },
  },
  methods: {
    touchOther() {
      this.hide();
    },
    noDefault() {},
    inputChange(e) {
      if (!e.detail) return;
      this.writeContent = e.detail.value;
      this.$nextTick(() => {
        // #ifdef MP-WEIXIN
        uni.setStorage({
          key: "commentWriteContent",
          data: JSON.stringify(this.writeContent),
        });
        // #endif
      });
    },
    sendComment() {
      if (this.writeContent) {
        this.focus = false;
        this.hide();
        this.callback &&
          this.callback({
            statusCode: "success",
            result: this.writeContent,
          });

        // #ifdef MP-WEIXIN
        setTimeout(() => {
          // 清空缓存，输入框数据
          uni.removeStorage({
            key: "commentWriteContent",
          });
          this.writeContent = "";
        }, 300);
        // #endif
      } else {
        uni.showToast({
          title: "请输入评论内容",
          duration: 2000,
          icon: "none",
        });
      }
    },

    inputFocus(e) {
      return;
      let { screenHeight, screenWidth, statusBarHeight, windowHeight } =
        this.systemInfo;
      let machineHeight = screenHeight - windowHeight; // 虚位高度
      let dp = screenWidth / screenHeight;
      if (e) {
        let { height } = e.detail; // 获取键盘高度
        if (height) this.inputWrapHeight = `${(height - machineHeight) * dp}px`;
      }
    },

    inputBlur() {
      this.inputWrapHeight = 0;
    },

    keyboardheightchange(e) {
      console.log(e);
    },

    show(payload_, callback_) {
      // console.log("show方法", payload_, callback_);
      this.getCommentStr();
      let payloadJudge = Object.prototype.toString.call(payload_);
      let callbackJude = Object.prototype.toString.call(callback_);
      if (payloadJudge == "[object Function]") this.callback = payload_;
      if (callbackJude == "[object Function]") this.callback = callback_;
      if (payloadJudge == "[object Object]") {
        this.maxlength = payload_.maxlength; // 字数限制
        this.placeholder = payload_.payload; // placeholder
      }
      this.showVisiable = true;
      this.$nextTick(() => {
        this.focus = true;
      });
    },

    hide() {
      this.showVisiable = false;
      this.$nextTick(() => {
        // this.writeContent = "";
        this.callback &&
          this.callback({
            statusCode: "fail",
            result: "",
          });
      });
    },

    getCommentStr() {
      // 获取缓存数据
      let that = this;
      // #ifdef MP-WEIXIN
      uni.getStorage({
        key: "commentWriteContent",
        success: function (res) {
          console.log("缓存数据", res.data);
          that.writeContent = JSON.parse(res.data);
        },
      });
      // #endif
    },
  },
  mounted() {
    const info = wx.getSystemInfoSync();
    if (info) this.platform = info.platform;
    this.systemInfo = info;
  },
};
</script>
<style lang="scss" scoped>
.comment-component {
  font-family: PingFang-SC-Regular, PingFang-SC;

  // width: 100vw;
  // height: 100vh;
  // height: 100%;
  background: transparent;
  background: rgba(0, 0, 0, 0.5);
  // background: red;
  z-index: 99999;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  // top: -10000px;
  .comment-write {
    position: absolute;
    bottom: 0;
    // top: 0;
    width: 100vw;
    height: 160px;
    background: #fff;
    display: flex;
    flex-direction: column;
    .comment-input {
      // width: 335px;
      width: calc(100% - 40px);
      height: 85px;
      background: #f7f8fa;
      margin: 15px auto;
      textarea {
        width: 100%;
        height: 100%;
        padding: 10px;
        font-size: 14px;
        font-weight: 400;
        color: #333;
      }
    }
    .comment-send {
      padding: 0 20px;
      height: 60px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      .content-num {
        font-size: 12px;
        font-weight: 400;
        color: #b4b2c0;
      }
      .send-btn {
        cursor: pointer;
        width: 65px;
        height: 30px;
        @include flexCenter;
        background: #000000;
        border-radius: 2px;
        font-size: 14px;
        font-weight: 400;
        color: #ffffff;
      }
      .send-btn.disabled {
        background: #dae0ea;
      }
    }
  }
}
</style>

 

 

 

I-T枭
关注
专栏目录
Android 弹出软键盘所遇到的坑及解决方法
08-31
主要介绍了Android 弹出软键盘所遇到的坑及解决方法，非常不错，具有参考借鉴价值，需要的朋友参考下
uniapp点击输入框时键盘不上推页面
qq_31432773的博客
08-09 2084
设置为false，然后监听键盘的高度赋值给输入框bottom。这里还一个非常重要的地方，在根元素设置。
uniapp小程序项目解决键盘问题
最新发布
m0_61368323的博客
07-17 1109
步骤：1. 使用adjust-position属性，禁止页面上移；2. 但此时如果输入框在底部，当点击输入时，键盘会弹起，这时候需要动态移动输入框的位置，使输入框位于键盘的上面，所以页需要获取键盘的高度。知识点：1. input有一个adjust-position属性，控制当键盘弹起时，是否自动上推页面。
关于在uni-app中键盘弹出页面内容被顶走的问题和内容总是保持在底部
justforcode1的博客
08-16 1391
事件来控制input的移动但是使用这个会导致input框显示有延迟，后面找了一下文档中提供了监控键盘高度变化的事件。在此之前找了很多文档看了对键盘的处理很多都是利用了input上的聚焦。
uniapp H5页面键盘弹起时获取键盘高度，内容自动滚动
peachban的博客
11-06 4248
需求：页面上半部分是固定的，下半部分是可以滚动的，下半部分是一个可以输入的表单。当点击input框输入的时候，手机会弹起输入框，输入框会遮挡下半部分界面。整个页面为了防止滑动，最大容器上都加了固定定位。手机弹起输入框以后，页面会在除了键盘高度的界面可以滚动。App平台软键盘弹出有 adjustResize|adjustPan 两种模式，默认为 adjustPan 模式，小程序平台只支持 adjustPan 模式，H5平台因不同浏览器而异。
uniApp 取安卓软键盘高度及设置
onlylele的博客
05-12 1609
当手机输入内容时会弹出系统默认的软件盘，此时可能导致其他整体的页面内容上移而覆盖到工具栏或者软件盘直接覆盖了底部的部分内容；
解决uni-app微信小程序底部input输入框，键盘弹起时页面整体上移问题
梅花寺
02-07 6141
由于获取的系统的尺寸单位都是 px ，给 bottom 设置的值单位也一定要是 px!不能因为是手机端就用 rpx，2倍的 rpx 也不可以，因为并不是每个手机分辨率都是我们设计图上375的2倍，一定要用 px 啊！最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。
uniapp 获取键盘高度
qq_43402051的博客
04-01 7561
uni.onKeyboardHeightChange((obj)=>{ let _sysInfo = uni.getSystemInfoSync(); let _heightDiff = _sysInfo.screenHeight - _sysInfo.windowHeight let _diff = obj.height - _heightDiff this.bottomHeight = (_diff > 0 ? _diff : 0) - 2 + "px"; })
解决uniapp中textarea输入框光标与placeholder提示内容高度不一致问题
qq_39625703的博客
12-02 1348
出现这样的原因，可能是我对textarea设置了高度，字体样式，导致了输入框光标和提示内容高度不一致，输入的信息也是和提示内容有明细的变化。输入框光标和提示内容高度保持一致。
uniapp获取键盘高度顶起底部输入框
weixin_51526447的博客
12-19 2086
uniapp获取键盘高度顶起底部输入框
弹出键盘,监听键盘高度
04-26
在我们开发中,经常用到评论等功能,在下方一个TextField,但是弹出键盘,评论框也要弹起,这时候要监听高度,本代码可完美实现此功能
解决Android软键盘弹出覆盖h5页面输入框问题
08-27
解决Android软键盘弹出覆盖h5页面输入框问题 知识点一：Android软键盘弹出机理 Android软键盘弹出是Android系统中的一种输入方式，当用户触发输入框焦点时，软键盘会弹出以便用户输入内容。在h5页面中，软键盘弹出...
iOS项目开发键盘弹出遮挡输入框问题解决方案
01-05
前者是单行输入文本框，后者是可滑动的多行输入文本框，在这整个开发过程中，我们需要控制键盘的弹出和收起、在输入结束的时候获取输入的信息，此外，我们还需要保证在键盘弹起的时候不遮挡我们输入的文本框。...
5种方法完美解决android软键盘挡住输入框方法详解
01-20
在Android应用开发中，经常会遇到一个问题，即当用户在输入框中输入时，弹出的软键盘会遮挡部分屏幕内容，尤其是对于登录或注册等需要填写多项信息的界面，这种情况严重影响了用户体验。为了解决这个问题，Android...
uniapp(全端兼容) - 实现点击输入框时完美顶起键盘，获取键盘高度动态计算顶起距离，解决软键盘弹出时输入框被覆盖问题，uniapp微信小程序/移动端h5网页/安卓苹果app（示例代码，一键复制
高级前端工程师
03-07 3615
uniapp，支付宝微信小程序，移动端H5网页网站，软键盘弹出位置不对，软键盘挡住了输入框怎么办，获取键盘高度计算弹出距离，uniapp如何解决输入框input激活后键盘弹出遮挡问题，uniapp输入框偶尔被键盘遮挡，解决uniapp在App环境下输入框被软键盘遮挡的问题，uniapp 完美解决苹果和安卓input框遮挡兼容问题，uniapp输入框拉起软键盘时，输入框显示不全，被软键盘挡住一半，input被键盘遮挡的解决方案，软键盘遮挡输入框，uniapp软键盘顶不起来输入框，输入框没有被软键盘弹出来怎么办
uni-app 监听窗口尺寸变化事件和隐藏键盘
杨葱儿
09-25 3733
监听窗口尺寸变化: 如App端设置软键盘弹出方式为adjustResize ，则在键盘弹出时，会触发此事件。 横竖屏切换时，会触发此事件 uni.onWindowResize(CALLBACK) uni.onWindowResize((res) => { console.log('变化后的窗口宽度=' + res.size.windowWidth) console.log('变化后的窗口高度=' + res.size.windowHeight) }) uni.offWind
uniapp 写一个跟随键盘谈起，位置在键盘上方的聊天输入框
weixin_35749545的博客
01-06 1289
好的，这是一个可以帮助你实现跟随键盘的聊天输入框的示例代码： 首先，你需要在你的 Vue 组件中监听键盘的显示和隐藏事件。你可以使用 uni.onKeyboardHeightChange 来实现这一点。 onReady() { uni.onKeyboardHeightChange(res => { if (res.height === 0) { // 键盘隐藏 ...
uni app(H5)中软键盘弹出,固定定位绝对定位元素位置发生错乱
qq_46784478的博客
01-06 5413
一.问题如下 最近用uni app写项目,发现H5软键盘弹起,导致我固定定位的按钮被顶了上去,如图 二.解决方法 1.让其在输入框获取焦点时隐藏 百度了许多,有让输入框获取焦点时让按钮隐藏的方法,失去在让按钮显示出来,但是这样写每个输入框都得加两个得到焦点和失去焦点的事件.而且如果你把软键盘放下,按钮不会出来.所以这个方法pass掉. 网上的方法很多,但是都不是我想要的效果. 2.将 bottom 改成 top 最后我的方法是把 固定定位的 bottom 改成了 top,因..
nut-tab-pane 弹出层错位
03-22
nut-tab-pane 是一个基于 Vue.js 的选项卡组件，用于创建多个选项卡，并在切换选项卡时显示相应的内容。关于弹出层错位的问题，可能是由于样式或布局的问题导致的。 要解决弹出层错位的问题，可以尝试以下几个步骤： 1. 检查样式：首先检查弹出层的样式是否正确设置。可能需要调整弹出层的位置、大小或层级等属性，确保它与选项卡组件对齐。 2. 检查布局：检查选项卡组件和弹出层所在的容器布局是否正确。确保它们的父元素具有适当的定位属性（如 relative、absolute 或 fixed），以便正确定位弹出层。 3. 调试工具：使用浏览器的开发者工具检查元素的样式和布局信息。可以通过修改样式或添加临时样式来调整弹出层的位置，以找到最佳的显示效果。 4. 查看文档和示例：查看 nut-tab-pane 组件的文档和示例，了解如何正确使用和配置该组件。可能会有一些特定的属性或事件可以帮助解决弹出层错位的问题。 希望以上信息对您有帮助！如果您还有其他问题，请随时提问。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值