Skip to content

H
hello uni-app x

DCloud / hello uni-app x

通知 5995
Star 90
Fork 162
H
hello uni-app x
提交 badc3da2 编写于 作者: taohebin@dcloud.io's avatar taohebin@dcloud.io
浏览文件
操作

update： 补充input、textarea的示例和测试例

上级 cb332a62
隐藏空白更改
内联 并排
Showing with 230 addition and 170 deletion
pages/component/input/input.uvue
浏览文件 @ badc3da2
...@@ -248,6 +248,17 @@ ...@@ -248,6 +248,17 @@
</view> </view>
</view> </view>
<view>
<view class="uni-title" style="flex-direction: row;align-items: center;">
<text class="uni-title-text">设置adjust-position</text>
<switch style="margin-left: 10px;" @change="changeAdjustPosition" :checked="adjustPosition"></switch>
</view>
<view class="input-wrapper">
<input class="uni-input" :adjust-position="adjustPosition"/>
</view>
</view>
</view> </view>
<!-- #ifdef APP --> <!-- #ifdef APP -->
</scroll-view> </scroll-view>
...@@ -282,7 +293,8 @@ ...@@ -282,7 +293,8 @@
holdKeyboard: false, holdKeyboard: false,
keyboardHeight: 0, keyboardHeight: 0,
focusedForKeyboardHeightChangeTest: false, focusedForKeyboardHeightChangeTest: false,
demoValue: '123' demoValue: '123',
adjustPosition: false
} }
}, },
methods: { methods: {
...@@ -359,6 +371,10 @@ ...@@ -359,6 +371,10 @@
changeHoldKeyboard(event : UniSwitchChangeEvent) { changeHoldKeyboard(event : UniSwitchChangeEvent) {
const checked = event.detail.value; const checked = event.detail.value;
this.holdKeyboard = checked this.holdKeyboard = checked
},
changeAdjustPosition(event : UniSwitchChangeEvent){
const checked = event.detail.value;
this.adjustPosition = checked
} }
} }
} }
......
pages/component/textarea/textarea.test.js
浏览文件 @ badc3da2
...@@ -81,4 +81,21 @@ describe('component-native-textarea', () => { ...@@ -81,4 +81,21 @@ describe('component-native-textarea', () => {
expect(await textarea2.value()).toBe("123") expect(await textarea2.value()).toBe("123")
}) })
} }
it("maxlength", async () => {
const input = await page.$('#textarea-instance-maxlength');
let str = "";
for(let i = 0;i < 200;i++){
str += `${i}`
}
await page.setData({
textareaMaxLengthValue: str
})
let length = (await input.value()).length
expect(length).toBe(10)
await page.setData({
textareaMaxLengthValue: ""
})
})
}); });
pages/component/textarea/textarea.uvue
浏览文件 @ badc3da2
<script> <script>
import { ItemType } from '@/components/enum-data/enum-data' import { ItemType } from '@/components/enum-data/enum-data'
export default { export default {
data() { data() {
return { return {
adjust_position_boolean: false, adjust_position_boolean: false,
show_confirm_bar_boolean: false, show_confirm_bar_boolean: false,
fixed_boolean: false, fixed_boolean: false,
auto_height_boolean: false, auto_height_boolean: false,
confirm_hold_boolean: false, confirm_hold_boolean: false,
focus_boolean: true, focus_boolean: true,
auto_focus_boolean: false, auto_focus_boolean: false,
default_value:"1\n2\n3\n4\n5\n6", default_value: "1\n2\n3\n4\n5\n6",
maxlength:-1, inputmode_enum: [{ "value": 1, "name": "text" }, { "value": 2, "name": "decimal" }, { "value": 3, "name": "numeric" }, { "value": 4, "name": "tel" }, { "value": 5, "name": "search" }, { "value": 6, "name": "email" }, { "value": 7, "name": "url" }, { "value": 0, "name": "none" }] as ItemType[],
inputmode_enum: [{"value":1,"name":"text"},{"value":2,"name":"decimal"},{"value":3,"name":"numeric"},{"value":4,"name":"tel"},{"value":5,"name":"search"},{"value":6,"name":"email"},{"value":7,"name":"url"},{"value":0,"name":"none"}] as ItemType[], confirm_type_list: [{ "value": 0, "name": "return" }, { "value": 1, "name": "done" }, { "value": 2, "name": "send" }, { "value": 3, "name": "search" }, { "value": 4, "name": "next" }, { "value": 5, "name": "go" }] as ItemType[],
confirm_type_list: [{"value":0,"name":"return"},{"value":1,"name":"done"},{"value":2,"name":"send"},{"value":3,"name":"search"},{"value":4,"name":"next"},{"value":5,"name":"go"}] as ItemType[], cursor_color: "#3393E2",
cursor_color: "#3393E2", cursor: 0,
cursor: 0, inputmode_enum_current: 0,
inputmode_enum_current: 0, confirm_type_current: 0,
confirm_type_current: 0, placeholder_value: "请输入",
placeholder_value: "请输入", defaultModel: '123',
defaultModel:'123' textareaMaxLengthValue: "",
} selectionStart: -1,
}, selectionEnd: -1,
hold_keyboard: false,
methods: { adjust_position: false
textarea_click() { console.log("组件被点击时触发") }, }
textarea_touchstart() { console.log("手指触摸动作开始") }, },
textarea_touchmove() { console.log("手指触摸后移动") },
textarea_touchcancel() { console.log("手指触摸动作被打断，如来电提醒，弹窗") }, methods: {
textarea_touchend() { console.log("手指触摸动作结束") }, textarea_click() { console.log("组件被点击时触发") },
textarea_tap() { console.log("手指触摸后马上离开") }, textarea_touchstart() { console.log("手指触摸动作开始") },
textarea_longpress() { console.log("如果一个组件被绑定了 longpress 事件，那么当用户长按这个组件时，该事件将会被触发。") }, textarea_touchmove() { console.log("手指触摸后移动") },
textarea_confirm() { console.log("点击完成时， 触发 confirm 事件，event.detail = {value: value}") }, textarea_touchcancel() { console.log("手指触摸动作被打断，如来电提醒，弹窗") },
textarea_input() { console.log("当键盘输入时，触发 input 事件，event.detail = {value, cursor}， @input 处理函数的返回值并不会反映到 textarea 上") }, textarea_touchend() { console.log("手指触摸动作结束") },
textarea_linechange() { console.log("输入框行数变化时调用，event.detail = {height: 0, height: 0, lineCount: 0}") }, textarea_tap() { console.log("手指触摸后马上离开") },
textarea_blur() { console.log("输入框失去焦点时触发，event.detail = {value, cursor}") }, textarea_longpress() { console.log("如果一个组件被绑定了 longpress 事件，那么当用户长按这个组件时，该事件将会被触发。") },
textarea_keyboardheightchange() { console.log("键盘高度发生变化的时候触发此事件，event.detail = {height: height, duration: duration}") }, textarea_confirm() { console.log("点击完成时， 触发 confirm 事件，event.detail = {value: value}") },
textarea_focus() { console.log("输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度") }, textarea_input() { console.log("当键盘输入时，触发 input 事件，event.detail = {value, cursor}， @input 处理函数的返回值并不会反映到 textarea 上") },
change_adjust_position_boolean(checked : boolean) { this.adjust_position_boolean = checked }, textarea_linechange() { console.log("输入框行数变化时调用，event.detail = {height: 0, height: 0, lineCount: 0}") },
change_show_confirm_bar_boolean(checked : boolean) { this.show_confirm_bar_boolean = checked }, textarea_blur() { console.log("输入框失去焦点时触发，event.detail = {value, cursor}") },
change_fixed_boolean(checked : boolean) { this.fixed_boolean = checked }, textarea_keyboardheightchange() { console.log("键盘高度发生变化的时候触发此事件，event.detail = {height: height, duration: duration}") },
change_auto_height_boolean(checked : boolean) { this.auto_height_boolean = checked }, textarea_focus() { console.log("输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度") },
change_confirm_hold_boolean(checked : boolean) { this.confirm_hold_boolean = checked }, change_adjust_position_boolean(checked : boolean) { this.adjust_position_boolean = checked },
change_focus_boolean(checked : boolean) { this.focus_boolean = checked }, change_show_confirm_bar_boolean(checked : boolean) { this.show_confirm_bar_boolean = checked },
change_auto_focus_boolean(checked : boolean) { this.auto_focus_boolean = checked }, change_fixed_boolean(checked : boolean) { this.fixed_boolean = checked },
change_cursor_color_boolean(checked : boolean) { if(checked){ this.cursor_color = "transparent"} else {this.cursor_color = "#3393E2"}}, change_auto_height_boolean(checked : boolean) { this.auto_height_boolean = checked },
radio_change_inputmode_enum(checked : number) { this.inputmode_enum_current = checked }, change_confirm_hold_boolean(checked : boolean) { this.confirm_hold_boolean = checked },
radio_change_confirm_type(checked : number) { this.confirm_type_current = checked } change_focus_boolean(checked : boolean) { this.focus_boolean = checked },
} change_auto_focus_boolean(checked : boolean) { this.auto_focus_boolean = checked },
} change_cursor_color_boolean(checked : boolean) { if (checked) { this.cursor_color = "transparent" } else { this.cursor_color = "#3393E2" } },
</script> radio_change_inputmode_enum(checked : number) { this.inputmode_enum_current = checked },
radio_change_confirm_type(checked : number) { this.confirm_type_current = checked },
<template> setSelection: function (selectionStart : number, selectionEnd : number) {
<!-- #ifdef APP --> uni.getElementById("textarea-instance-2")?.focus()
<scroll-view style="flex: 1"> this.selectionStart = selectionStart;
<!-- #endif --> this.selectionEnd = selectionEnd;
<view class="main"> },
<textarea onSelectionBlurChange() {
:value="default_value" this.selectionEnd = 0;
class="uni-textarea" },
:auto-focus="true" changeHoldKeyboard(event : UniSwitchChangeEvent) {
:focus="focus_boolean" const checked = event.detail.value;
:confirm-hold="confirm_hold_boolean" this.hold_keyboard = checked;
:auto-height="auto_height_boolean" },
:fixed="fixed_boolean" changeAdjustPosition(event : UniSwitchChangeEvent) {
:show-confirm-bar="show_confirm_bar_boolean" const checked = event.detail.value;
:adjust-position="adjust_position_boolean" this.adjust_position = checked;
:cursor-color="cursor_color" }
:cursor="cursor" }
:placeholder="placeholder_value" }
:inputmode="inputmode_enum[inputmode_enum_current].name" </script>
:confirm-type="confirm_type_list[confirm_type_current].name"
:maxlength="maxlength" <template>
@click="textarea_click" <!-- #ifdef APP -->
@touchstart="textarea_touchstart" <scroll-view style="flex: 1">
@touchmove="textarea_touchmove" <!-- #endif -->
@touchcancel="textarea_touchcancel" <view class="main">
@touchend="textarea_touchend" <textarea :value="default_value" class="uni-textarea" :auto-focus="true" :focus="focus_boolean"
@tap="textarea_tap" :confirm-hold="confirm_hold_boolean" :auto-height="auto_height_boolean" :fixed="fixed_boolean"
@longpress="textarea_longpress" :show-confirm-bar="show_confirm_bar_boolean" :adjust-position="adjust_position_boolean"
@confirm="textarea_confirm" :cursor-color="cursor_color" :cursor="cursor" :placeholder="placeholder_value"
@input="textarea_input" :inputmode="inputmode_enum[inputmode_enum_current].name"
@linechange="textarea_linechange" :confirm-type="confirm_type_list[confirm_type_current].name" @click="textarea_click"
@blur="textarea_blur" @touchstart="textarea_touchstart" @touchmove="textarea_touchmove" @touchcancel="textarea_touchcancel"
@keyboardheightchange="textarea_keyboardheightchange" @touchend="textarea_touchend" @tap="textarea_tap" @longpress="textarea_longpress" @confirm="textarea_confirm"
@focus="textarea_focus" @input="textarea_input" @linechange="textarea_linechange" @blur="textarea_blur"
style="padding: 10px; border: 1px solid #666;height: 200px" @keyboardheightchange="textarea_keyboardheightchange" @focus="textarea_focus"
/> style="padding: 10px; border: 1px solid #666;height: 200px" />
</view> </view>
<view class="content"> <view class="content">
<boolean-data <boolean-data :defaultValue="false" title="键盘弹起时，是否自动上推页面（限非 Web 平台）"
:defaultValue="false" @change="change_adjust_position_boolean"></boolean-data>
title="键盘弹起时，是否自动上推页面（限非 Web 平台）" <boolean-data :defaultValue="false" title="是否自动增高，设置auto-height时，style.height不生效"
@change="change_adjust_position_boolean" @change="change_auto_height_boolean"></boolean-data>
></boolean-data> <boolean-data :defaultValue="focus_boolean" title="获取焦点" @change="change_focus_boolean"></boolean-data>
<boolean-data <boolean-data :defaultValue="true" title="首次自动获取焦点" @change="change_auto_focus_boolean"></boolean-data>
:defaultValue="false" <boolean-data :defaultValue="false" title="改变光标颜色为透明" @change="change_cursor_color_boolean"></boolean-data>
title="是否自动增高，设置auto-height时，style.height不生效" <enum-data :items="confirm_type_list" title="confirm-type，设置键盘右下角按钮。（Android仅支持return）"
@change="change_auto_height_boolean" @change="radio_change_confirm_type"></enum-data>
></boolean-data> <boolean-data :defaultValue="false" title="点击软键盘右下角按钮时是否保持键盘不收起(confirm-type为return时必然不收起)"
<boolean-data @change="change_confirm_hold_boolean"></boolean-data>
:defaultValue="focus_boolean" <enum-data :items="inputmode_enum" title="input-mode，控制软键盘类型。（仅限 Web 平台符合条件的高版本浏览器或webview）。"
title="获取焦点" @change="radio_change_inputmode_enum"></enum-data>
@change="change_focus_boolean" <boolean-data :defaultValue="false" title="是否显示键盘上方带有“完成”按钮那一栏（仅限小程序平台）"
></boolean-data> @change="change_show_confirm_bar_boolean"></boolean-data>
<boolean-data <boolean-data :defaultValue="false" title="如果 textarea 是在一个 position:fixed 的区域，需要显示指定属性 fixed 为 true（仅限小程序平台）"
:defaultValue="true" @change="change_fixed_boolean"></boolean-data>
title="首次自动获取焦点"
@change="change_auto_focus_boolean"
></boolean-data> <view class="title-wrap">
<boolean-data <view>maxlength 输入最大长度为10</view>
:defaultValue="false" </view>
title="改变光标颜色为透明" <view class="textarea-wrap">
@change="change_cursor_color_boolean" <textarea id="textarea-instance-maxlength" class="textarea-instance" :value="textareaMaxLengthValue"
></boolean-data> :maxlength="10" />
<enum-data </view>
:items="confirm_type_list"
title="confirm-type，设置键盘右下角按钮。（Android仅支持return）" <view class="title-wrap">
@change="radio_change_confirm_type" <view>cursor-spacing、placeholder-class、placeholder-style例子</view>
></enum-data> </view>
<boolean-data <view class="textarea-wrap">
:defaultValue="false" <textarea id="textarea-height-exception" class="textarea-instance" placeholder="底部textarea测试键盘遮挡"
title="点击软键盘右下角按钮时是否保持键盘不收起(confirm-type为return时必然不收起)" placeholder-class="placeholder" placeholder-style="background-color:red" :cursor-spacing="300" />
@change="change_confirm_hold_boolean" </view>
></boolean-data> <view class="title-wrap">
<enum-data <view>同时存在 v-model 和 value</view>
:items="inputmode_enum" </view>
title="input-mode，控制软键盘类型。（仅限 Web 平台符合条件的高版本浏览器或webview）。" <view class="textarea-wrap">
@change="radio_change_inputmode_enum" <textarea class="textarea-instance" v-model='defaultModel' value='456'></textarea>
></enum-data> </view>
<boolean-data
:defaultValue="false" <view class="title-wrap">
title="是否显示键盘上方带有“完成”按钮那一栏（仅限小程序平台）" <view @click="setSelection(2, 5)">设置输入框聚焦时光标的起始位置和结束位置（点击生效）</view>
@change="change_show_confirm_bar_boolean" </view>
></boolean-data> <view class="textarea-wrap">
<boolean-data <textarea id="textarea-instance-2" class="textarea-instance" value="Hello UniApp X Textarea TestCase"
:defaultValue="false" :selection-start="selectionStart" :selection-end="selectionEnd" @blur="onSelectionBlurChange" />
title="如果 textarea 是在一个 position:fixed 的区域，需要显示指定属性 fixed 为 true（仅限小程序平台）" </view>
@change="change_fixed_boolean"
></boolean-data> <view class="title-wrap">
<view style="flex-direction:row;justify-content:center;"> <view>设置hold-keyboard</view>
<textarea id="textarea-height-exception" style="flex:1;border: 1 solid #666;margin: 10px" placeholder="底部textarea测试键盘遮挡"/> <switch style="margin-left: 10px;" @change="changeHoldKeyboard" :checked="hold_keyboard"></switch>
</view> </view>
</view> <view class="textarea-wrap">
<view>同时存在 v-model 和 value</view> <textarea class="textarea-instance" :hold-keyboard="hold_keyboard" />
<view class="main"> </view>
<textarea class="list-item both-set-textarea" v-model='defaultModel' value='456'></textarea>
</view> <view class="title-wrap">
<view>设置adjust-position</view>
<!-- #ifdef APP --> <switch style="margin-left: 10px;" @change="changeAdjustPosition" :checked="adjust_position"></switch>
</scroll-view> </view>
<!-- #endif --> <view class="textarea-wrap">
</template> <textarea class="textarea-instance" :adjust-position="adjust_position" />
</view>
<style> </view>
.main { <!-- #ifdef APP -->
min-height: 100px; </scroll-view>
padding: 5px 0; <!-- #endif -->
border-bottom: 1px solid rgba(0, 0, 0, 0.06); </template>
flex-direction: row;
justify-content: center; <style>
} .main {
min-height: 100px;
.main .list-item { padding: 5px 0;
width: 100%; border-bottom: 1px solid rgba(0, 0, 0, 0.06);
height: 100px; flex-direction: row;
border: 1px solid #666; justify-content: center;
} }
.main .list-item {
width: 100%;
height: 100px;
border: 1px solid #666;
}
.textarea-wrap {
flex-direction: row;
justify-content: center;
}
.title-wrap {
flex-direction: row;
align-items: center;
margin-left: 10px;
}
.textarea-instance {
flex: 1;
border: 1 solid #666;
margin: 10px;
}
.placeholder {
background-color: yellow;
}
</style> </style>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或