textarea的提示信息placeholder在IOS和Android不统一
发布于 6 年前 作者 dguo 7584 次浏览 来自 问答

textarea多行文本输入框里的placeholder提示信息在IOS和Android真机上显示不一样，无法统一样式，用户体验不好。

<view class="wrap">
    <form bindsubmit="formSubmit" class="formSubmit">
        <view class="clearFix">
            <text>联系人</text>
            <input type="text" name="contact" placeholder-style="font-size:16px;color:#ccc;" placeholder="请填写联系人" value="" />
        </view>
        <view class="clearFix">
            <text>联系电话</text>
            <input type="number" name="mobile" placeholder-style="font-size:16px;color:#ccc;" placeholder="请填写联系电话" value="" />
        </view>
        <view class="clearFix">
            <text>联系邮箱</text>
            <input type="text" name="email" placeholder-style="font-size:16px;color:#ccc;" placeholder="请填写联系邮箱" value="" />
        </view>
        <view class="clearFix">
            <text>需求描述</text>
            <textarea style="height:36px;" maxlength="300" name="note" placeholder-style="font-size:16px;color:#ccc;" placeholder="请简要描述您的需求，我们的公关服务人员将尽快与您联系" auto-height value="" />
        </view>
        <view class="btn">
            <button formType="submit" type="warn" hover-class="none">我要定制</button>
        </view>
    </form>
</view>
.wrap{
    height: auto;
    padding: 0 36rpx;
    border-top: 1px solid #e0e0e0;
    border-bottom: none;
}
.clearFix::after{
    content: "";
    display: block;
    clear: both;
}
view{
 /*   display: flex;*/
    border-bottom: 1px solid #f5f5f5;
}
text{
    float:left;
    width: 150rpx;
    font-size: 32rpx;
    letter-spacing: 2rpx;
    line-height: 90rpx;
}
input{
    float:left;
    width: 528rpx;
    height: 90rpx;
    line-height: 90rpx;
    font-size: 32rpx;
    font-family: "Microsoft YaHei"；
}
.title{
    height: auto;
    min-height: 40rpx;
    line-height: 40rpx;
    margin: 0;
    padding-top: 26rpx;
}
textarea{
    float:left;
    width: 528rpx;
    min-height: 416rpx;
    line-height: 52rpx;
    /*margin-top: 10rpx;*/
    padding-top: 10rpx;
    font-size: 32rpx;
}
.btn{
    margin-top: 73rpx;
    justify-content: center;
    border: none;
}
.btn button{
    font-size: 28rpx;
}

在开发者工具上是这样显示的

在Android真机上是这样的



在IOS上是这样的


三个工具三种不同的显示效果，无法统一，还有placeholder-style的样式行高不起作用，我没有用placeholder-class类去指定placeholder的样式

回到顶部