codecamp

支付宝小程序表单组件 输入框·Textarea

多行输入框,可输入多行内容。

说明:

  • 无法通过 textarea 获取键盘高度;
  • iOS 系统支付宝客户端版本 10.1.80 及以上不支持 focus=true 自动唤起;
  • 可以使用 my.hideKeyboard 隐藏键盘;
  • 添加属性 controlled="{{true}}" 表示 value 内容会完全受 setData 控制;
  • 可以在 input 组件中加上 enableNative="{{false}}",避免 textarea 弹出键盘后内容被顶上去;
  • 加上 enableNative="{{false}}" 解决安卓系统下 textarea 获取焦点的时候文字消失问题。

<!-- API-DEMO page/component/textarea/textarea.axml -->
<view class="page">
  <view class="page-description">文本框</view>
  <view class="page-section">
    <view class="page-section-title">受控聚焦</view>
    <view class="page-section-demo">
      <textarea focus="{{focus}}" onFocus="onFocus" onBlur="onBlur" placeholder="Please input something" />
    </view>
    <view class="page-section-btns">
      <button type="default" size="mini" onTap="bindButtonTap">聚焦</button>
    </view>
  </view>
  <view class="page-section">
    <view class="page-section-title">自适应高度</view>
    <view class="page-section-demo">
      <textarea onBlur="bindTextAreaBlur" auto-height placeholder="Please input something" />
    </view>
  </view>


  <view class="page-section">
    <view class="page-section-title">结合表单</view>
    <form onSubmit="bindFormSubmit">
      <view class="page-section-demo">
        <textarea name="textarea" placeholder="Please input something"  />
      </view>
      <view class="page-section-btns">
        <button form-type="submit" size="mini" type="primary">提交</button>
      </view>  
    </form>
  </view>
</view>
// API-DEMO page/component/textarea/textarea.js
Page({
  data: {
    height: 20,
    focus: false,
  },
  bindButtonTap() {
    this.onFocus();
  },
  onFocus() {
    this.setData({
      focus: true,
    });
  },
  onBlur() {
    this.setData({
      focus: false,
    });
  },


  bindTextAreaBlur(e) {
    console.log(e.detail.value);
  },
  bindFormSubmit(e) {
    my.alert({
      content: e.detail.value.textarea,
    });
  },
});

属性

属性 类型 默认值 描述 最低版本
name String - 组件名字,用于表单提交获取数据。 -
value String - 初始内容。 -
placeholder String - 占位符。 -
placeholder-style String - 指定 placeholder 的样式。 1.6.0
placeholder-class String - 指定 placeholder 的样式类。 1.6.0
disabled Boolean false 是否禁用。 -
maxlength Number 140 最大长度,当设置为 -1 时不限制最大长度。 -
focus Boolean false 获取焦点。 -
auto-height Boolean false 是否自动增高。 -
show-count Boolean true 是否渲染字数统计功能(是否删除默认计数器/是否显示字数统计)。 1.8.0
controlled Boolean false 是否为受控组件。为 true 时,value 内容会完全受 setData 控制。 1.8.0
onInput EventHandle - 键盘输入时触发,event.detail = {value: value} -
onFocus EventHandle - 输入框聚焦时触发 event.detail = {value: value} -
onBlur EventHandle - 输入框失去焦点时触发,event.detail = {value: value} -
onConfirm EventHandle - 点击完成时触发,event.detail = {value: value} -
支付宝小程序表单组件 输入框·Input
支付宝小程序表单组件 Radio
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

支付宝小程序开发文档

支付宝小程序 快速示例

支付宝小程序 小程序快速示例

支付宝小程序 框架

支付宝小程序 组件

支付宝小程序组件 基础组件

支付宝小程序组件 无障碍访问

支付宝小程序 扩展组件

支付宝小程序扩展组件 UI组件

支付宝小程序 API

支付宝小程序 开发工具

支付宝小程序 云服务

支付宝小程序 Serverless

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }