From e6f8801c0cd8e59dc4f1a9df4dafcb36a64a762d Mon Sep 17 00:00:00 2001
From: yinjiacheng <yinjiacheng@dcloud.io>
Date: Wed, 16 Aug 2023 17:32:26 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0input=E7=A4=BA=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/component/input/input.uvue | 599 ++++++++++++++++---------------
 1 file changed, 301 insertions(+), 298 deletions(-)

diff --git a/pages/component/input/input.uvue b/pages/component/input/input.uvue
index f2472eb7..5d21cf21 100644
--- a/pages/component/input/input.uvue
+++ b/pages/component/input/input.uvue
@@ -1,307 +1,310 @@
 <template>
-  <!-- #ifdef APP -->
-  <scroll-view style="flex: 1">
-    <!-- #endif -->
-    <view class="nvue-page-root">
-      <page-head :title="title"></page-head>
-      <view class="uni-common-mt">
-        <view class="uni-form-item uni-column">
-          <view class="title"
-            ><text class="uni-form-item__title">可自动聚焦的 input</text></view
-          >
-          <view class="uni-input-wrapper">
-            <input
-              class="uni-input"
-              :focus="true"
-              placeholder="自动获得焦点"
-              ref="input"
-            />
-          </view>
-        </view>
-        <!-- #ifdef APP-PLUS -->
-        <!-- <view v-if="platform==='ios'&&!isNvue" class="uni-form-item uni-column">
-                <view class="title"><text class="uni-form-item__title">隐藏 iOS 软键盘上的导航条</text></view>
-                <view class="uni-input-wrapper">
-                    <input class="uni-input" placeholder="触摸其他地方收起键盘" @focus="onFocus" @blur="onBlur" />
-                </view>
-            </view> -->
-        <!-- #endif -->
-        <view class="uni-form-item uni-column">
-          <view class="title"
-            ><text class="uni-form-item__title"
-              >键盘右下角按钮显示为搜索</text
-            ></view
-          >
-          <view class="uni-input-wrapper">
-            <input
-              class="uni-input"
-              confirmType="search"
-              placeholder="键盘右下角按钮显示为搜索"
-            />
-          </view>
-        </view>
-        <!-- #ifndef H5 -->
-        <view class="uni-form-item uni-column">
-          <view class="title"
-            ><text class="uni-form-item__title"
-              >键盘右下角按钮显示为发送</text
-            ></view
-          >
-          <view class="uni-input-wrapper">
-            <input
-              class="uni-input"
-              confirmType="send"
-              placeholder="键盘右下角按钮显示为发送"
-            />
-          </view>
-        </view>
-        <!-- #endif -->
-        <view class="uni-form-item uni-column">
-          <view class="title"
-            ><text class="uni-form-item__title"
-              >控制最大输入长度的 input</text
-            ></view
-          >
-          <view class="uni-input-wrapper">
-            <input
-              class="uni-input"
-              :maxlength="10"
-              placeholder="最大输入长度为10"
-            />
-          </view>
-        </view>
-        <view class="uni-form-item uni-column">
-          <view class="title"
-            ><text class="uni-form-item__title"
-              >实时获取输入值：{{ inputValue }}</text
-            ></view
-          >
-          <view class="uni-input-wrapper">
-            <input
-              class="uni-input"
-              @input="onKeyInput"
-              placeholder="输入同步到view中"
-            />
-          </view>
-        </view>
-        <view class="uni-form-item uni-column">
-          <view class="title"
-            ><text class="uni-form-item__title">控制输入的 input</text></view
-          >
-          <view class="uni-input-wrapper">
-            <input
-              class="uni-input"
-              @input="replaceInput"
-              :value="changeValue"
-              placeholder="连续的两个1会变成2"
-            />
-          </view>
-        </view>
-        <!-- #ifndef MP-BAIDU -->
-        <!-- <view class="uni-form-item uni-column">
-                <view class="title"><text class="uni-form-item__title">控制键盘的 input</text></view>
-                <view class="uni-input-wrapper">
-                    <input class="uni-input" ref="input1" @input="hideKeyboard" placeholder="输入123自动收起键盘" />
-                </view>
-            </view> -->
-        <!-- #endif -->
-        <view class="uni-form-item uni-column">
-          <view class="title"
-            ><text class="uni-form-item__title">数字输入的 input</text></view
-          >
-          <view class="uni-input-wrapper">
-            <input
-              class="uni-input"
-              type="number"
-              placeholder="这是一个数字输入框"
-            />
-          </view>
-        </view>
-        <view class="uni-form-item uni-column">
-          <view class="title"
-            ><text class="uni-form-item__title">密码输入的 input</text></view
-          >
-          <view class="uni-input-wrapper">
-            <input
-              class="uni-input"
-              :password="true"
-              type="text"
-              placeholder="这是一个密码输入框"
-            />
-          </view>
-        </view>
-        <view class="uni-form-item uni-column">
-          <view class="title"
-            ><text class="uni-form-item__title">带小数点的 input</text></view
-          >
-          <view class="uni-input-wrapper">
-            <input
-              class="uni-input"
-              type="digit"
-              placeholder="带小数点的数字键盘"
-            />
-          </view>
-        </view>
-        <!-- <view class="uni-form-item uni-column">
-                <view class="title"><text class="uni-form-item__title">身份证输入的 input</text></view>
-                <view class="uni-input-wrapper">
-                    <input class="uni-input" type="idcard" placeholder="身份证输入键盘" /> </view>
-            </view> -->
-        <view class="uni-form-item uni-column">
-          <view class="title"
-            ><text class="uni-form-item__title"
-              >控制占位符颜色的 input</text
-            ></view
-          >
-          <view class="uni-input-wrapper">
-            <input
-              class="uni-input"
-              placeholder-style="color:#F76260"
-              placeholder="占位符字体是红色的"
-            />
-          </view>
-        </view>
-        <view class="uni-form-item uni-column">
-          <view class="title"
-            ><text class="uni-form-item__title">带清除按钮的输入框</text></view
-          >
-          <view class="uni-input-wrapper">
-            <input
-              class="uni-input"
-              placeholder="带清除按钮的输入框"
-              :value="inputClearValue"
-              @input="clearInput"
-            />
-            <image
-              class="uni-icon"
-              src="/static/icons/clear.png"
-              v-if="showClearIcon"
-              @click="clearIcon"
-            ></image>
-          </view>
-        </view>
-        <view class="uni-form-item uni-column">
-          <view class="title"
-            ><text class="uni-form-item__title">可查看密码的输入框</text></view
-          >
-          <view class="uni-input-wrapper">
-            <input
-              class="uni-input"
-              placeholder="请输入密码"
-              :password="showPassword"
-            />
-            <image
-              class="uni-icon"
-              :src="
-                !showPassword
-                  ? '/static/icons/eye-active.png'
-                  : '/static/icons/eye.png'
-              "
-              @click="changePassword"
-            ></image>
-          </view>
-        </view>
-      </view>
-    </view>
-    <!-- #ifdef APP -->
-  </scroll-view>
-  <!-- #endif -->
+	<!-- #ifdef APP -->
+	<scroll-view style="flex: 1">
+		<!-- #endif -->
+		<page-head :title="title"></page-head>
+		<view class="uni-common-mt uni-padding-wrap">
+			<view>
+				<view class="uni-title">
+					<text class="uni-title-text">设置输入框的初始内容</text>
+				</view>
+				<view class="uni-input-wrapper">
+					<input class="uni-input" value="hello uni-app x" />
+				</view>
+			</view>
+
+			<view>
+				<view class="uni-title">
+					<text class="uni-title-text">type取值（不同输入法表现可能不一致）</text>
+				</view>
+				<view class="uni-input-wrapper">
+					<input class="uni-input" type="text" placeholder="文本输入键盘" />
+				</view>
+				<view class="uni-input-wrapper">
+					<input class="uni-input" type="number" placeholder="数字输入键盘" />
+				</view>
+				<view class="uni-input-wrapper">
+					<input class="uni-input" type="digit" placeholder="带小数点的数字输入键盘" />
+				</view>
+				<view class="uni-input-wrapper">
+					<input class="uni-input" type="tel" placeholder="电话输入键盘" />
+				</view>
+			</view>
+
+			<view>
+				<view class="uni-title">
+					<text class="uni-title-text">密码输入框</text>
+				</view>
+				<view class="uni-input-wrapper">
+					<input class="uni-input" :password="true" />
+				</view>
+			</view>
+
+			<view>
+				<view class="uni-title">
+					<text class="uni-title-text">占位符样式</text>
+				</view>
+				<view class="uni-input-wrapper">
+					<input class="uni-input" placeholder-style="color:red" placeholder="占位符文字颜色为红色" />
+				</view>
+				<view class="uni-input-wrapper">
+					<input class="uni-input" placeholder-class="uni-input-placeholder-class" placeholder="占位符背景色为绿色" />
+				</view>
+			</view>
+
+			<view>
+				<view class="uni-title">
+					<text class="uni-title-text">设置禁用输入框</text>
+				</view>
+				<view class="uni-input-wrapper">
+					<input class="uni-input" :disabled="true" />
+				</view>
+			</view>
+
+			<view>
+				<view class="uni-title">
+					<text class="uni-title-text">设置最大输入长度</text>
+				</view>
+				<view class="uni-input-wrapper">
+					<input class="uni-input" :maxlength="10" placeholder="最大输入长度为10" />
+				</view>
+			</view>
+
+			<view>
+				<view class="uni-title">
+					<text class="uni-title-text">设置光标与键盘的距离</text>
+				</view>
+				<view class="uni-input-wrapper">
+					<input class="uni-input" :cursor-spacing="1000" placeholder="光标与键盘的距离为1000px" />
+				</view>
+			</view>
+
+			<view>
+				<view class="uni-title">
+					<text class="uni-title-text">自动获取焦点</text>
+				</view>
+				<view class="uni-input-wrapper">
+					<input class="uni-input" :focus="true" />
+				</view>
+			</view>
+
+			<view>
+				<view class="uni-title">
+					<text class="uni-title-text">confirm-type取值（不同输入法表现可能不一致）</text>
+				</view>
+				<view class="uni-input-wrapper">
+					<input class="uni-input" confirmType="send" placeholder="键盘右下角按钮显示为发送" />
+				</view>
+				<view class="uni-input-wrapper">
+					<input class="uni-input" confirmType="search" placeholder="键盘右下角按钮显示为搜索" />
+				</view>
+				<view class="uni-input-wrapper">
+					<input class="uni-input" confirmType="next" placeholder="键盘右下角按钮显示为下一个" />
+				</view>
+				<view class="uni-input-wrapper">
+					<input class="uni-input" confirmType="go" placeholder="键盘右下角按钮显示为前往" />
+				</view>
+				<view class="uni-input-wrapper">
+					<input class="uni-input" confirmType="done" placeholder="键盘右下角按钮显示为完成" />
+				</view>
+			</view>
+
+			<view>
+				<view class="uni-title">
+					<text class="uni-title-text">点击键盘右下角按钮时保持键盘不收起</text>
+				</view>
+				<view class="uni-input-wrapper">
+					<input class="uni-input" :confirm-hold="true" />
+				</view>
+			</view>
+
+			<view>
+				<view class="uni-title" @click="setCursor(4)">
+					<text class="uni-title-text">设置输入框聚焦时光标的位置（点击生效）</text>
+				</view>
+				<view class="uni-input-wrapper">
+					<input ref="input" class="uni-input" value="0123456789" :cursor="cursor" />
+				</view>
+			</view>
+
+			<view>
+				<view class="uni-title" @click="setSelection(0, 4)">
+					<text class="uni-title-text">设置输入框聚焦时光标的起始位置和结束位置（点击生效）</text>
+				</view>
+				<view class="uni-input-wrapper">
+					<input ref="input2" class="uni-input" value="0123456789" :selection-start="selectionStart"
+						:selection-end="selectionEnd" />
+				</view>
+			</view>
+
+			<view>
+				<view class="uni-title">
+					<text class="uni-title-text">键盘弹起时，自动上推页面</text>
+				</view>
+				<view class="uni-input-wrapper">
+					<input class="uni-input" :adjust-position="true" />
+				</view>
+			</view>
+
+			<view>
+				<view class="uni-title">
+					<text class="uni-title-text">input事件</text>
+					<text class="uni-subtitle-text" v-if="inputEventDetail">{{inputEventDetail}}</text>
+				</view>
+				<view class="uni-input-wrapper">
+					<input class="uni-input" @input="onInput" />
+				</view>
+			</view>
+
+			<view>
+				<view class="uni-title">
+					<text class="uni-title-text">focus事件和blur事件</text>
+					<text class="uni-subtitle-text" v-if="focusAndBlurEventDetail">{{focusAndBlurEventDetail}}</text>
+				</view>
+				<view class="uni-input-wrapper">
+					<input class="uni-input" @focus="onFocus" @blur="onBlur" />
+				</view>
+			</view>
+
+			<view>
+				<view class="uni-title">
+					<text class="uni-title-text">confirm事件</text>
+					<text class="uni-subtitle-text" v-if="confirmEventDetail">{{confirmEventDetail}}</text>
+				</view>
+				<view class="uni-input-wrapper">
+					<input class="uni-input" @confirm="onConfirm" />
+				</view>
+			</view>
+
+			<view>
+				<view class="uni-title">
+					<text class="uni-title-text">keyboardheightchange事件</text>
+					<text class="uni-subtitle-text"
+						v-if="keyboardHeightChangeEventDetail">{{keyboardHeightChangeEventDetail}}</text>
+				</view>
+				<view class="uni-input-wrapper">
+					<input class="uni-input" @keyboardheightchange="onKeyborardHeightChange" />
+				</view>
+			</view>
+
+			<view>
+				<view class="uni-title">
+					<text class="uni-title-text">带清除按钮的输入框</text>
+				</view>
+				<view class="uni-input-wrapper">
+					<input class="uni-input" placeholder="带清除按钮的输入框" :value="inputClearValue" @input="clearInput" />
+					<image class="uni-icon" src="/static/icons/clear.png" v-if="showClearIcon" @click="clearIcon">
+					</image>
+				</view>
+			</view>
+
+			<view>
+				<view class="uni-title">
+					<text class="uni-title-text">可查看密码的输入框</text>
+				</view>
+				<view class="uni-input-wrapper">
+					<input class="uni-input" placeholder="请输入密码" :password="showPassword" />
+					<image class="uni-icon"
+						:src="!showPassword ? '/static/icons/eye-active.png' : '/static/icons/eye.png'"
+						@click="changePassword"></image>
+				</view>
+			</view>
+		</view>
+		<!-- #ifdef APP -->
+	</scroll-view>
+	<!-- #endif -->
 </template>
 <script lang="ts">
-export default {
-  data() {
-    return {
-      title: 'input',
-      focus: false,
-      inputValue: '',
-      showClearIcon: false,
-      inputClearValue: '',
-      changeValue: '',
-      showPassword: true,
-    }
-  },
-  onReady() {
-    // TODO auto focus
-    // (this.$refs['input'] as INode).focus();
-  },
-  methods: {
-    onKeyInput: function (event: InputEvent) {
-      this.inputValue = event.detail.value
-    },
-    replaceInput: function (event: InputEvent) {
-      var value = event.detail.value
-      if (value == '11') {
-        this.changeValue = '2'
-      }
-    },
-    clearInput: function (event: InputEvent) {
-      this.inputClearValue = event.detail.value
-      if (event.detail.value.length > 0) {
-        this.showClearIcon = true
-      } else {
-        this.showClearIcon = false
-      }
-    },
-    clearIcon: function () {
-      this.inputClearValue = ''
-      this.showClearIcon = false
-    },
-    changePassword: function () {
-      this.showPassword = !this.showPassword
-    },
-    // hideKeyboard: function(event: InputEvent) {
-    //     if (event.detail.value === '123') {
-    //         uni.hideKeyboard();
-    //     }
-    // },
-    // onFocus() {
-    //     this.$mp.page.$getAppWebview().setStyle({
-    //         softinputNavBar: 'none'
-    //     })
-    // },
-    // onBlur() {
-    //     this.$mp.page.$getAppWebview().setStyle({
-    //         softinputNavBar: 'auto'
-    //     })
-    // }
-  },
-}
+	export default {
+		data() {
+			return {
+				title: 'input',
+				showClearIcon: false,
+				inputClearValue: '',
+				showPassword: true,
+				cursor: -1,
+				selectionStart: -1,
+				selectionEnd: -1,
+				inputEventDetail: '',
+				focusAndBlurEventDetail: '',
+				confirmEventDetail: '',
+				keyboardHeightChangeEventDetail: ''
+			}
+		},
+		methods: {
+			setCursor: function (cursor : number) {
+				(this.$refs['input'] as INode).focus();
+				this.cursor = cursor;
+			},
+			setSelection: function (selectionStart : number, selectionEnd : number) {
+				(this.$refs['input2'] as INode).focus();
+				this.selectionStart = selectionStart;
+				this.selectionEnd = selectionEnd;
+			},
+			clearInput: function (event : InputEvent) {
+				this.inputClearValue = event.detail.value
+				if (event.detail.value.length > 0) {
+					this.showClearIcon = true
+				} else {
+					this.showClearIcon = false
+				}
+			},
+			clearIcon: function () {
+				this.inputClearValue = ''
+				this.showClearIcon = false
+			},
+			changePassword: function () {
+				this.showPassword = !this.showPassword
+			},
+			onInput: function (event : InputEvent) {
+				console.log("键盘输入", JSON.stringify(event.detail));
+				this.inputEventDetail = JSON.stringify(event.detail)
+			},
+			onFocus: function (event : InputFocusEvent) {
+				console.log("输入框聚焦", JSON.stringify(event.detail));
+				this.focusAndBlurEventDetail = JSON.stringify(event.detail);
+			},
+			onBlur: function (event : InputBlurEvent) {
+				console.log("输入框失去焦点", JSON.stringify(event.detail));
+				this.focusAndBlurEventDetail = JSON.stringify(event.detail);
+			},
+			onConfirm: function (event : InputConfirmEvent) {
+				console.log("点击完成按钮", JSON.stringify(event.detail));
+				this.confirmEventDetail = JSON.stringify(event.detail);
+			},
+			onKeyborardHeightChange: function (event : InputKeyboardHeightChangeEvent) {
+				console.log("键盘高度发生变化", JSON.stringify(event.detail));
+				this.keyboardHeightChangeEventDetail = JSON.stringify(event.detail);
+			}
+		}
+	}
 </script>
 
 <style scoped>
-.nvue-page-root {
-  background-color: #f8f8f8;
-  padding-bottom: 20px;
-}
-
-.title {
-  padding: 5px 13px;
-}
-
-.uni-form-item__title {
-  font-size: 16px;
-  line-height: 24px;
-}
+	.uni-input-wrapper {
+		display: flex;
+		padding: 8px 13px;
+		margin: 10rpx 0;
+		flex-direction: row;
+		flex-wrap: nowrap;
+		background-color: #ffffff;
+	}
 
-.uni-input-wrapper {
-  display: flex;
-  padding: 8px 13px;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  background-color: #ffffff;
-}
+	.uni-input {
+		height: 28px;
+		line-height: 28px;
+		font-size: 15px;
+		padding: 0px;
+		flex: 1;
+		background-color: #ffffff;
+	}
 
-.uni-input {
-  height: 28px;
-  line-height: 28px;
-  font-size: 15px;
-  padding: 0px;
-  flex: 1;
-  background-color: #ffffff;
-}
+	.uni-icon {
+		width: 24px;
+		height: 24px;
+	}
 
-.uni-icon {
-  width: 24px;
-  height: 24px;
-}
-</style>
+	.uni-input-placeholder-class {
+		background-color: green;
+	}
+</style>
\ No newline at end of file
-- 
GitLab