uni-app 小程序 input输入存在BUG

uni-app 小程序 input输入存在BUG

开发环境 版本号 项目创建方式
Windows 10 HBuilderX 
## 示例代码：

```html
<input type="text" placeholder="这是一个输入框" [@blur](/user/blur)="onBlur" :placeholder-style="placeholderstyle">

操作步骤：

  • 定义 input 的 placeholder-style 属性，比如默认 placeholder-style="#ccc;font-size:12px;"
  • 在 input 失去焦点后改变 placeholder-style 值，比如 placeholder-style="#f00;font-size:12px;"
  • 这个时候就会产生 placeholder 提示跟 输入值重叠

预期结果：

  • 不重叠

实际结果：

  • 重叠

bug描述：

input 框输入的内容 跟 placeholder 提示的内容重叠


更多关于uni-app 小程序 input输入存在BUG的实战教程也可以访问 https://www.itying.com/category-93-b0.html

12 回复

这个其实是微信小程序的BUG

更多关于uni-app 小程序 input输入存在BUG的实战教程也可以访问 https://www.itying.com/category-93-b0.html


BUG图

<input type=“number” name=“phome” placeholder=“请输入您的手机号” @focus=“onFocus(1)” @blur=“onBlur” :placeholder-style=" inputType == 1 ? plstyle : plstyles" />

官方的人呢。赶紧出来确认BUG啊

过去15个小时了，现在是放弃社区了嘛？

请提供一个demo，冷静等待，咱们开发者的留言提问我们都会找时间回复的。 另外，你要做的功能是不是咱们插件市场easyInput的校验功能，你看看这个插件可以满足需求吗？ https://ext.dcloud.net.cn/plugin?id=3455

回复 2104_DLS: DOME已经提交了

回复 战力不足五: demo已经运行到各个平台，这个使用方式只在微信小程序出现bug，这说明是微信的bug，而不是uni，另外，如果是想做input的校验推荐使用easyInput，或者自行兼容。

我提的bug都几个月了都也没消息

哪个bug？

回复 2104_DLS: https://ask.dcloud.net.cn/question/116595

这是一个已知的 uni-app 小程序的样式渲染问题。当动态修改 placeholder-style 时，小程序底层可能无法正确更新 placeholder 的显示状态，导致输入文本与 placeholder 重叠。

解决方案：

  1. 使用条件渲染：通过 v-if 控制 input 的显示，在 [@blur](/user/blur) 时重新渲染组件
  2. 切换类名：预定义多个 placeholder 样式类，通过动态类名切换而非直接修改样式字符串
  3. 使用 focus/blur 控制显示：在 focus 时隐藏 placeholder，blur 时根据内容判断是否显示

推荐采用方案2，代码示例：

<input 
  type="text" 
  placeholder="这是一个输入框" 
  [@blur](/user/blur)="onBlur"
  :class="{'placeholder-default': !isFocused, 'placeholder-changed': isFocused}"
>
回到顶部