Nhảy tới nội dung

textarea

Cập nhật lần cuối vào

Tương tự với thẻ textarea trên web, textarea là một dạng text box cho phép bạn có thể nhập nhiều dòng vào.

Quét mã để trải nghiệm

Xem code mẫu trên Tini Studio

Demo

Trải nghiệm thử với trình giả lập bên dưới

Thuộc tính

Thuộc tínhKiểu dữ liệuGiá trị mặc địnhMô tả
namestringKhai báo name khi được sử dụng trong form, được sử dụng để lấy value cho form
valuestring''Giá trị khởi tạo
placeholderstringNội dung hiển thị trước khi người dùng nhập giá trị của textarea
placeholder-classstringClass name cho placeholder
placeholder-stylecss styleInline style cho placeholder
disabledbooleanfalseDisable textarea
maxlengthnumber140Giới hạn số ký tự được nhập
focusbooleanfalseTự động focus vào textarea
auto-heightbooleanfalseTự động tăng chiều cao. (Bạn không nên set max-heightmin-height cho textarea nếu giá trị của thuộc tính này là true)
show-countbooleantrueHiển thị số ký tự đang có của textarea
controlledbooleanfalseKhi giá trị là true, nội dung value của textarea sẽ được điều khiển hoàn toàn thông qua hàm setData trong file js
onInputeventSự kiện sẽ được gọi khi nội dung của textarea bị thay đổi, event.detail = { value: value }
onConfirmeventSự kiện sẽ được gọi khi nhấn nút submit (return/Nhập) , event.detail = { value: value }
onFocuseventSự kiện sẽ được gọi khi textarea được focus , event.detail = { value: value }
onBlureventSự kiện sẽ được gọi khi textarea không được focus nữa , event.detail = { value: value }

Sample Code

index.txml
<block-header title="Usage" description="textarea" />
<view class="container">
<view class="block">
<text class="header">Events</text>
<textarea onInput="onInput" onFocus="onFocus" onConfirm="onConfirm" onBlur="onBlur" />
</view>

<view class="block">
<text class="header">Hide count</text>
<textarea show-count="{{false}}" />
</view>

<view class="block">
<text class="header">Auto height</text>
<textarea auto-height />
</view>

<view class="block">
<text class="header">Disabled</text>
<textarea placeholder="disabled" disabled="true" />
</view>
</view>
index.js
Page({
data: {},
onInput(e) {
console.log('onInput', e);
},
onConfirm(e) {
console.log('onConfirm', e);
},
onFocus(e) {
console.log('onFocus', e);
},
onBlur(e) {
console.log('onBlur', e);
}
});
index.tcss
.container {
min-height: 100%;
background-color: var(--gray20);
padding: 16px;
}

.block {
background-color: white;
margin: 8px 0;
padding: 16px;
border-radius: var(--border-radius-rounded-4px);
display: flex;
flex-direction: column;
}