uni-app textarea placeholder 占位符增高

uni-app textarea placeholder 占位符增高

开发环境 版本号 项目创建方式
Mac 10.15.6 HBuilderX 
产品分类：uniapp/App

PC开发环境操作系统：Mac

PC开发环境操作系统版本号：10.15.6

HBuilderX类型：正式

HBuilderX版本号：3.1.14

手机系统：iOS

手机系统版本号：IOS 14

手机厂商：苹果

手机机型：iphonex

页面类型：nvue

打包方式：云端

示例代码：

``` html
<template>  
    <view>  
        <uni-nav-bar :fixed="true" :border="false" :statusBar="true" left-icon="closeempty" right-icon="plusempty" title="发动态" @clickLeft="leftAction()" @clickRight="rightAction()">
        </uni-nav-bar>  
        <view style="width: 750rpx;background-color: #FFFFFF;margin: 32rpx;">  
            <textarea v-model="publish.text" :show-confirm-bar="false"  placeholder="记录下此刻发布心情" />  
        </view>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                publish:{  
                    text:''  
                },  
            }  
        },  
        methods: {  
            leftAction:function(){  
                uni.navigateBack()  
            },  
            rightAction:function(){  

            }  
        }  
    }  
</script>  

<style>  
</style>

操作步骤：

<template>  
    <view>  
        <uni-nav-bar :fixed="true" :border="false" :statusBar="true" left-icon="closeempty" right-icon="plusempty" title="发动态" @clickLeft="leftAction()" @clickRight="rightAction()">
        </uni-nav-bar>  
        <view style="width: 750rpx;background-color: #FFFFFF;margin: 32rpx;">  
            <textarea v-model="publish.text" :show-confirm-bar="false"  placeholder="记录下此刻发布心情" />  
        </view>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                publish:{  
                    text:''  
                },  
            }  
        },  
        methods: {  
            leftAction:function(){  
                uni.navigateBack()  
            },  
            rightAction:function(){  

            }  
        }  
    }  
</script>  

<style>  
</style>

预期结果：

<template>  
    <view>  
        <uni-nav-bar :fixed="true" :border="false" :statusBar="true" left-icon="closeempty" right-icon="plusempty" title="发动态" @clickLeft="leftAction()" @clickRight="rightAction()">
        </uni-nav-bar>  
        <view style="width: 750rpx;background-color: #FFFFFF;margin: 32rpx;">  
            <textarea v-model="publish.text" :show-confirm-bar="false"  placeholder="记录下此刻发布心情" />  
        </view>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                publish:{  
                    text:''  
                },  
            }  
        },  
        methods: {  
            leftAction:function(){  
                uni.navigateBack()  
            },  
            rightAction:function(){  

            }  
        }  
    }  
</script>  

<style>  
</style>

实际结果：

<template>  
    <view>  
        <uni-nav-bar :fixed="true" :border="false" :statusBar="true" left-icon="closeempty" right-icon="plusempty" title="发动态" @clickLeft="leftAction()" @clickRight="rightAction()">
        </uni-nav-bar>  
        <view style="width: 750rpx;background-color: #FFFFFF;margin: 32rpx;">  
            <textarea v-model="publish.text" :show-confirm-bar="false"  placeholder="记录下此刻发布心情" />  
        </view>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                publish:{  
                    text:''  
                },  
            }  
        },  
        methods: {  
            leftAction:function(){  
                uni.navigateBack()  
            },  
            rightAction:function(){  

            }  
        }  
    }  
</script>  

<style>  
</style>


更多关于uni-app textarea placeholder 占位符增高的实战教程也可以访问 https://www.itying.com/category-93-b0.html

9 回复

确实存在该问题

更多关于uni-app textarea placeholder 占位符增高的实战教程也可以访问 https://www.itying.com/category-93-b0.html


我还以为官方来了呢

回复 7***@qq.com: 来了

官方呢

收到，即将排查

终于等来了

还有 安卓 nvue navbar 自定义按钮图标消失。vue 向nvue 通信失败uni.$on uni.$emit 接收不到传输的参数

感谢反馈，可以给 textarea 添加 padding 来解决此问题，下个版本会解决默认偏高的问题
<textarea style="font-size: 32rpx; width: 750rpx; padding: 20rpx;" v-model="publish.text" :show-confirm-bar="false" placeholder="记录下此刻发布心情" />

在 nvue 页面中，textarea 组件的 placeholder 显示异常可能与 nvue 的渲染机制有关。nvue 采用原生渲染，textarea 是原生组件，其样式表现与 vue 页面有所不同。

针对 placeholder 显示问题，可以尝试以下解决方案：

  1. 检查样式冲突：确保父容器样式不会影响 textarea 的布局，特别是宽度、高度和内边距设置。

  2. 显式设置 placeholder 样式：

textarea {
  placeholder-color: #999999; /* 设置占位符颜色 */
  font-size: 14px; /* 设置字体大小 */
}
  1. 设置 textarea 的固定高度：
<textarea 
  v-model="publish.text" 
  :show-confirm-bar="false" 
  placeholder="记录下此刻发布心情"
  style="height: 200rpx;">
</textarea>
  1. 如果问题仍然存在，可以尝试使用 uni-app 的条件编译，针对 iOS 平台单独处理：
<textarea 
  v-model="publish.text" 
  :show-confirm-bar="false" 
  placeholder="记录下此刻发布心情"
  :style="{'height': isIOS ? '200rpx' : 'auto'}">
</textarea>
回到顶部