textarea.md 3.1 KB
Newer Older
D
DCloud_LXH 已提交
1 2 3 4
## textarea

<!-- UTSCOMJSON.textarea.description -->

D
DCloud_LXH 已提交
5 6
<!-- UTSCOMJSON.textarea.compatibility -->

7
<!-- UTSCOMJSON.textarea.attribute -->
D
DCloud_LXH 已提交
8 9 10

<!-- UTSCOMJSON.textarea.event -->

DCloud_iOS_XHY's avatar
DCloud_iOS_XHY 已提交
11 12 13 14 15 16 17 18 19 20 21
<!-- UTSCOMJSON.textarea.component_type-->

#### 获取原生view对象

**Android 平台:**

获取textarea组件对应的UniElement对象,通过UniElement对象的[getAndroidView](../dom/unielement.md#getandroidview-2)函数获取组件原生view对象

```uts
//导入安卓原生AppCompatEditText对象
import AppCompatEditText from "androidx.appcompat.widget.AppCompatEditText"
22 23 24 25

//通过textarea组件定义的id属性值,获取textarea标签的UniElement对象
const textareaElement = uni.getElementById(id)
//UniElement.getAndroidView设置泛型为安卓底层AppCompatEditText对象,直接获取AppCompatEditText, 如果泛型不匹配会返回null
DCloud_iOS_XHY's avatar
DCloud_iOS_XHY 已提交
26
if(textareaElement != null) {
27 28 29 30
	//editText就是textarea组件对应的原生view对象
	const editText = textareaElement.getAndroidView<AppCompatEditText>()
}
```
DCloud_iOS_XHY's avatar
DCloud_iOS_XHY 已提交
31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48

**iOS 平台:**

获取view组件对应的UniElement对象,通过UniElement对象的[getIOSView](../dom/unielement.html#getiosview)函数获取组件原生view对象

```uts
//通过 textarea 组件定义的 id 属性值,获取 textarea 标签的 UniElement 对象
const textareaElement = uni.getElementById(id)
//获取原生 view
const view = inputElement?.getIOSView();
//判断 view 是否存在,类型是否为 UITextView
if (view != null && view instanceof UITextView) {
    //将 view 转换为 UITextView 类型 
    const textField = view! as UITextView;
}
```

更多示例请参考 uts 插件 [uts-get-native-view](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha/uni_modules/uts-get-native-view/utssdk/app-ios/index.uts)
49

D
DCloud_LXH 已提交
50 51
<!-- UTSCOMJSON.textarea.children -->

52 53
<!-- UTSCOMJSON.textarea.example -->

D
DCloud_LXH 已提交
54 55
<!-- UTSCOMJSON.textarea.reference -->

W
wanganxp 已提交
56 57 58 59 60
## 键盘上推专题
input和textarea组件都一个属性`adjust-position`,默认为true,即软键盘弹出时,默认上推页面以显示出输入框,避免输入框被软键盘遮挡。

因为此处内容与input重复,详见[input文档](input.md#adjust-position)

雪洛's avatar
雪洛 已提交
61 62 63 64
## inputmode说明

inputmode 兼容性:Chrome >= 66、Edge >= 79、Firefox >= 95、Chrome Android >= 66、Firefox for Android >= 79、Safari on iOS >= 12.2、WebView Android >= 66

W
wanganxp 已提交
65
## Tips
taohebin@dcloud.io's avatar
taohebin@dcloud.io 已提交
66

DCloud_Heavensoft's avatar
DCloud_Heavensoft 已提交
67 68 69 70 71
* uni-app x 4.0 起,App-Android平台 textarea 点击输入框外的屏幕会自动收起软键盘。
* uni-app x 4.0 起,App-Android平台 textarea 的 font-size 默认值统一为 16px,line-height 默认值为 1.2em,width 默认值为300px。
* uni-app x 4.15 起,App-iOS平台 textarea 软键盘默认右下角改为 return(换行) ,换行时,键盘不会收起。
* 由于Android系统限制,textarea的键盘右下角按钮只能是`换行`,所以暂时不提供`confirm-type`属性。
* 当软键盘右下角为 换行 时,confirm-hold 恒为 true,设置为false也不生效,即按下 换行 时,软键盘不会消失。
taohebin@dcloud.io's avatar
taohebin@dcloud.io 已提交
72
* 在Android 9以下的系统版本,样式`line-height`点击键盘换行时行间距设置无效,此问题是Android系统的的bug,后续解决。