uni-app nvue页面input输入框bug

uni-app nvue页面input输入框bug

操作步骤：

nvue页面，input输入框，在输入邮箱时，遇到“.”号，文字被遮挡。

预期结果：

nvue页面，input输入框，在输入邮箱时，遇到“.”号，应该正常

实际结果：

nvue页面，input输入框，在输入邮箱时，遇到“.”号，文字被遮挡。

bug描述：

nvue页面，input输入框，在输入邮箱时，遇到“.”号，文字被遮挡。
附件两张图片，分别是有点号和无点号时的input界面。（qq两个字母下半部分不见了！）

图片

环境信息

信息类别	详细信息
产品分类	uniapp/App
PC开发环境操作系统	Windows
PC开发环境操作系统版本号	win10
HBuilderX类型	正式
HBuilderX版本号	3.1.8
手机系统	iOS
手机系统版本号	IOS 14
手机厂商	苹果
手机机型	iPhonex
页面类型	nvue
打包方式	云端
项目创建方式	HBuilderX

更多关于uni-app nvue页面input输入框bug的实战教程也可以访问 https://www.itying.com/category-93-b0.html

bupafengyu 1楼

文字被“拼写纠正” 的红色虚线遮挡了，关闭手机系统或输入法的纠正功能

更多关于uni-app nvue页面input输入框bug的实战教程也可以访问 https://www.itying.com/category-93-b0.html

这是一个已知的 nvue 输入框渲染问题，主要出现在 iOS 平台的特定场景下。当输入包含“.”等特殊字符时，字体渲染可能出现截断或遮挡。

解决方案：

调整 input 组件的 line-height 属性，建议设置为字体大小的 1.2-1.5 倍
检查并统一设置 font-family，避免使用系统默认字体
确保 nvue 页面样式使用 Flex 布局，避免混合传统 Web 布局
临时方案：通过 @input 事件监听输入内容，动态调整输入框高度

代码示例：

<input 
  class="my-input"
  @input="onInput"
  placeholder="请输入邮箱"
/>

.my-input {
  font-size: 32rpx;
  line-height: 48rpx;
  font-family: -apple-system, BlinkMacSystemFont;
}

回到顶部