微信小程序 input 光标不居中问题处理

  1. 问题:
    通过 input 组件 placeholder-class 设置了占位符 font-size, 而没有设置 input 的字体大小,从而因为占位符字体小于默认字体,导致了在一些 Android 机型上面 input 聚焦的时候,光标不居中
  1. 解决办法: input 的 font-size 和 placeholder-class 的 font-size 设置成一样
<view class='search-wrapper'>
  <view class='search-inner'>
    <input class='search-input' type='text' placeholder='可输入项目或投资人关键词' placeholder-class='search-placeholder' ></input>
  </view>
</view>
 
.search-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 32rpx 30rpx 14rpx 30rpx;
  box-sizing: border-box;
  background-color: #ffffff;
  z-index: 1000;
}
.search-relative-wrapper {
  position: relative;
  z-index: 0;
  padding: 32rpx 0 14rpx 0;
}
.search-inner {
  font-size: 24rpx;
  padding-left: 76rpx;
  background: #F6F6F6;
  border-radius: 8rpx;
  background-image: url('http://p8e12hdcc.bkt.clouddn.com/home_search@2x.png');
  background-repeat: no-repeat;
  background-size: 24rpx 24rpx;
  background-position: 36rpx center;
}
.search-input {
  height: 60rpx;
}
.search-placeholder {
  font-size: 24rpx;
  color: #A7A5A3;
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容