textarea

概述

提供可交互的界面，接收用户的输入，默认为多行。

使用限制

子组件

不支持。

属性

支持 <text> 属性，同时除了支持 通用属性 以外，还支持如下属性。

样式

支持active伪类。除了支持 通用样式以外，还支持如下样式。

事件

除了支持 通用事件 以外，还支持如下事件。

方法

示例代码

<template>
  <div class="container">
    <div class="page-title-wrap">
      <text class="page-title">{{componentName}}</text>
    </div>

    <div class="item-container">
      <div class="item-content">
        <textarea id="textarea" maxlength="5" placeholder="Please enter content" class="textarea" @selectionchange="selectionchange"></textarea>
        <text class="txt">Wrap text when there is too much text, scroll display when setting high</text>
      </div>
      <input class="select-button" value="select all" type="button" onclick="select"></input>
      <input class="select-button" value="Set the selected area" type="button" onclick="setSelectionRange"></input>
      <input class="select-button" value="Get the first and last position of the selected area" type="button" onclick="getSelectionRange"></input>

      <div class="item-content">
        <textarea class="textarea textarea-fontfamily"></textarea>
        <text class="txt">this textarea font-family is serif</text>
      </div>
    </div>
  </div>
</template>

<style>
    .container {
      flex: 1;
      flex-direction: column;
    }
    .page-title-wrap {
      padding-top: 50px;
      padding-bottom: 80px;
      justify-content: center;
    }
    .page-title {
      padding-top: 30px;
      padding-bottom: 30px;
      padding-left: 40px;
      padding-right: 40px;
      border-color: #bbbbbb;
      color: #bbbbbb;
      border-bottom-width: 2px;
    }

    .item-container {
      margin-bottom: 50px;
      margin-right: 60px;
      margin-left: 60px;
      flex-direction: column;
    }

    .textarea {
      border-color: #bbbbbb;
      border-width: 1px;
      padding: 15px;
      height: 150px;
      font-size: 30px;
      color: #FF6347;
      placeholder-color: #8A2BE2;
    }

    .item-content {
      flex-direction: column;
      background-color: #ffffff;
      padding: 30px;
      margin-bottom: 100px;
      justify-content: center;
    }

    .select-button {
      padding: 15px;
      font-size: 30px;
      color: #000000;
    }

    .textarea-fontfamily {
      font-family: serif;
    }
</style>

<script>
    import prompt from '@system.prompt'

    export default {
        data: {
            componentName: 'textarea'
        },
        onInit() {
            this.$page.setTitleBar({ text: 'textarea' })
        },
        select() {
            this.$element('textarea').select()
        },
        setSelectionRange() {
            this.$element('textarea').setSelectionRange({ start: 0, end: 2 })
        },
        getSelectionRange() {
            this.$element('textarea').getSelectionRange({
                callback: function (start, end) {
                    prompt.showToast({
                        message: 'selection start:' + start + ',end:' + end
                    })
                }
            })
        },
        selectionchange() {
            console.log('selectionchange')
        },
        linechange(ret) {
            console.log('lineCount = ' + ret.lineCount)
            console.log('height = ' + ret.height)
        }
    }
</script>

效果图如下：

版本更新说明