Skip to content

【H5】input 组件 placeholder 位置错乱 #1222

Closed
@xiaoyucoding

Description

问题描述
H5 平台下,使用 placeholder-class 属性设置 top 值后,placeholer 的位置错乱,不符合预期。

复现步骤

<template>
  <view class="content">
    <input class="input" placeholder-class="placeholder" type="text" placeholder="input placeholder" />
  </view>
</template>

<script>
  export default {
    data() {
      return {};
    },
    methods: {},
    onLoad() {}
  };
</script>

<style>
  .input {
    border: 1px solid #007AFF;
  }

  .placeholder {
    top: 0;
  }
</style>

运行示例代码后,placeholder 的文字内容向上超出了容器,而非处于top: 0px;的预期位置。

预期结果
placeholder 的文字位于top: 0px;位置。

实际结果
placeholder 的文字向上超出了容器范围。

系统信息:

  • 发行平台: H5平台
  • 操作系统 [如 iOS 12.1.2、Android 7.0]
  • HBuilderX版本 [如使用HBuilderX,则需提供 HBuilderX 版本号]
  • uni-app版本
    • uni-app v2.5.1
    • uni-app cli v2.0.0-alpha-25120200103006
  • 设备信息 Chrome

补充信息
解决 input 组件默认宽度异常的问题以及文字无法自动垂直居中的问题 中设置了uni-input-placeholder的样式:

.uni-input-placeholder {
  top: 50%;
  transform: translateY(-50%);
}

限制了自定义样式去设置 top 值,进而引发了此问题。

实际应用中,此问题出现在引用了 vant-weapp 组件的项目中。vant-weapp 的 input 组件中有如下样式:

.van-field__placeholder {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  pointer-events: none;
  color: #969799;
  color: var(--field-placeholder-text-color, #969799);
}

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions