uni-app 原生input标签聚焦时字体会变化导致字体抖动

uni-app 原生input标签聚焦时字体会变化导致字体抖动

信息类别 详情
产品分类 uniapp/小程序/微信
PC开发环境 Mac
操作系统版本 10.15.7
第三方工具版本 1.05.21.2.10
基础库版本 2.14.4
项目创建方式 CLI
CLI版本 2.0.0-29820201110001

操作步骤：

使用原生input标签，小程序端，聚焦和不聚焦，Input字体变化，导致轻微抖动

预期结果：

字体不变

实际结果：

字体变化

bug描述：

使用原生input标签，小程序端，聚焦和不聚焦，Input字体变化，导致轻微抖动

代码

<input  
  v-model="optLogin.phone"  
/>

截图

Image Image


更多关于uni-app 原生input标签聚焦时字体会变化导致字体抖动的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

2023年了，还是有这个问题

更多关于uni-app 原生input标签聚焦时字体会变化导致字体抖动的实战教程也可以访问 https://www.itying.com/category-93-b0.html


是这样的，因为获取焦点的时候会切换为原生输入框
如果有要求，可以到微信小程序社区反馈一下

这是一个常见的小程序原生input组件样式问题。根本原因是微信小程序原生组件在聚焦/失焦时默认会改变字体样式。

解决方案有以下几种：

  1. 强制统一字体样式：
input {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: normal;
  line-height: 1.5;
}
  1. 使用uni-app的u-input组件替代原生input：
<u-input v-model="optLogin.phone" />
  1. 通过CSS重置微信小程序的默认样式：
input {
  -webkit-appearance: none;
  -webkit-text-fill-color: #333;
  opacity: 1;
}
  1. 使用!important强制覆盖：
input {
  font-size: 16px !important;
}
回到顶部