Closed
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