textarea

多行输入框。

属性说明

confirm-type 有效值

示例

查看示例
以下示例代码，来自于hello uni-app项目，推荐使用HBuilderX，新建uni-app项目，选择hello uni-app模板，可直接体验完整示例。

<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
<template>
    <view>
        <view class="uni-title uni-common-pl">输入区域高度自适应，不会出现滚动条</view>
        <view class="uni-textarea">
            <textarea @blur="bindTextAreaBlur" auto-height />
            </view>
            <view class="uni-title uni-common-pl">占位符字体是红色的textarea</view>
            <view class="uni-textarea">
                <textarea placeholder-style="color:#F76260" placeholder="占位符字体是红色的"/>
            </view>
        </view>
</template>

export default {
    data() {
        return {}
    },
    methods: {
        bindTextAreaBlur: function (e) {
            console.log(e.detail.value)
        }
    }
}

Tips

• textarea 的 blur 事件会晚于页面上的 tap 事件，如果需要在 button 的点击事件获取 textarea，可以使用 form 的 @submit。
• 如果遇到 value 属性设置不生效的问题参考：组件属性设置不生效解决办法
• 微信小程序、百度小程序、字节跳动小程序中，textarea是原生组件，层级高于前端组件，

请勿在 scroll-view、swiper、picker-view、movable-view 中使用 textarea 组件。覆盖textarea需要使用 cover-view。详见

• 小程序端 css 动画对 textarea 组件无效。
• H5 平台只能在用户交互时修改 focus 生效。
• 如果遇到 focus 属性设置不生效的问题参考：组件属性设置不生效解决办法
• 软键盘的弹出和收起逻辑，详见input的文档
• 如需禁止点击其他位置收起键盘的默认行为，可以监听touch事件并使用prevent修饰符（仅支持App-v3、H5，其他平台可以通过设置focus来使输入框重新获取焦点），例如在确认按钮上使用：@touchend.prevent="onTap"

**

富文本编辑的解决方案

在输入框里图文混排内容，在web上该功能依赖document，而小程序和app的正常页面又没有document。

• 方式一：使用uni-app自带的editor组件，该组件支持App、H5、微信小程序，其他家小程序自身未提供这类解决方案。
• 方式二：采用markdown编辑器方案，输入区输入markdown语法，预览区提供预览。这种方式可以跨端。插件市场搜富文本编辑，有不少插件。
• 方式三：使用web-view组件，加载html页面，此时可使用web中常见的各种富文本编辑器，插件市场也有这类插件。