input.uvue

<template>
  <!-- #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="input-wrapper">
          <input id="uni-input-default" 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="input-wrapper">
          <input id="uni-input-type-text" class="uni-input" type="text" placeholder="文本输入键盘" />
        </view>
        <view class="input-wrapper">
          <input id="uni-input-type-number" class="uni-input" type="number" placeholder="数字输入键盘" />
        </view>
        <view class="input-wrapper">
          <input id="uni-input-type-digit" class="uni-input" type="digit" placeholder="带小数点的数字输入键盘" />
        </view>
        <view class="input-wrapper">
          <input id="uni-input-type-tel" class="uni-input" :type="inputTypeTel" placeholder="电话输入键盘" />
        </view>
      </view>

      <view>
        <view class="uni-title">
          <text class="uni-title-text">密码输入框</text>
        </view>
        <view class="input-wrapper">
          <input id="uni-input-password" class="uni-input" :password="inputPassword" :value="inputPasswordValue" />
        </view>
      </view>

      <view>
        <view class="uni-title">
          <text class="uni-title-text">占位符样式</text>
        </view>
        <view class="input-wrapper">
          <input id="uni-input-placeholder1" class="uni-input" :placeholder-style="inputPlaceHolderStyle"
            placeholder="占位符文字颜色为红色" />
        </view>
        <view class="input-wrapper">
          <input id="uni-input-placeholder2" class="uni-input" :placeholder-class="inputPlaceHolderClass"
            placeholder="占位符字体大小为10px" />
        </view>
        <view class="input-wrapper">
          <input class="uni-input" :placeholder-style="inputPlaceHolderStyle"
            value="不设置placeholder只设置placeholder-style" />
        </view>
      </view>

      <view>
        <view class="uni-title">
          <text class="uni-title-text">设置禁用输入框</text>
        </view>
        <view class="input-wrapper">
          <input id="uni-input-disable" class="uni-input" :disabled="true"/>
        </view>
      </view>

      <view>
        <view class="uni-title">
          <text class="uni-title-text">设置最大输入长度</text>
        </view>
        <view class="input-wrapper">
          <input id="uni-input-maxlength" class="uni-input" :maxlength="10" placeholder="最大输入长度为10"
            :value="inputMaxLengthValue" @input="onMaxLengthInput" :focus="inputMaxLengthFocus" />
        </view>
      </view>

      <view>
        <view class="uni-title">
          <text class="uni-title-text">设置光标与键盘的距离</text>
        </view>
        <view class="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="input-wrapper">
          <input id="uni-input-focus" class="uni-input" :focus="focus"
            @keyboardheightchange="inputFocusKeyBoardChange" />
        </view>
      </view>

      <view>
        <view class="uni-title">
          <text class="uni-title-text">confirm-type取值（不同输入法表现可能不一致）</text>
        </view>
        <view class="input-wrapper">
          <input id="uni-input-confirm-send" class="uni-input" confirmType="send" placeholder="键盘右下角按钮显示为发送" />
        </view>
        <view class="input-wrapper">
          <input id="uni-input-confirm-search" class="uni-input" confirmType="search" placeholder="键盘右下角按钮显示为搜索" />
        </view>
        <view class="input-wrapper">
          <input id="uni-input-confirm-next" class="uni-input" confirmType="next" placeholder="键盘右下角按钮显示为下一个" />
        </view>
        <view class="input-wrapper">
          <input id="uni-input-confirm-go" class="uni-input" confirmType="go" placeholder="键盘右下角按钮显示为前往" />
        </view>
        <view class="input-wrapper">
          <input id="uni-input-confirm-done" class="uni-input" confirmType="done" placeholder="键盘右下角按钮显示为完成" />
        </view>
      </view>

      <view>
        <view class="uni-title">
          <text class="uni-title-text">点击键盘右下角按钮时保持键盘不收起</text>
        </view>
        <view class="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="input-wrapper">
          <input ref="input" class="uni-input" value="0123456789" :cursor="cursor" @blur="onCursorBlurChange"/>
        </view>
      </view>

      <view>
        <view class="uni-title" @click="setSelection(0, 4)">
          <text class="uni-title-text">设置输入框聚焦时光标的起始位置和结束位置（点击生效）</text>
        </view>
        <view class="input-wrapper">
          <input ref="input2" class="uni-input" value="0123456789" :selection-start="selectionStart"
            :selection-end="selectionEnd" @blur="onSelectionBlurChange"/>
        </view>
      </view>

      <view>
        <view class="uni-title" style="flex-direction: row;align-items: center;">
          <text class="uni-title-text">设置光标颜色为红色</text>
          <switch style="margin-left: 10px;" @change="changeCursorColor" :checked="cursor_color=='red'"></switch>
        </view>
        <view class="input-wrapper">
          <input id="uni-input-cursor-color" class="uni-input" :cursor-color="cursor_color" value="光标颜色" />
        </view>
      </view>

      <view>
        <view class="uni-title">
          <text class="uni-title-text">键盘弹起时，自动上推页面</text>
        </view>
        <view class="input-wrapper">
          <input class="uni-input" :adjust-position="true" />
        </view>
      </view>


      <view>
        <view class="uni-title" style="flex-direction: row;align-items: center;">
          <text class="uni-title-text">设置hold-keyboard</text>
          <switch style="margin-left: 10px;" @change="changeHoldKeyboard" :checked="holdKeyboard"></switch>
        </view>
        <view class="input-wrapper">
          <input class="uni-input" :hold-keyboard="holdKeyboard" value="hold keyboard " />
        </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="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="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="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="input-wrapper">
          <input class="uni-input" @keyboardheightchange="onKeyborardHeightChange" :focus="focusedForKeyboardHeightChangeTest"/>
        </view>
      </view>

      <view>
        <view class="uni-title">
          <text class="uni-title-text">带清除按钮的输入框</text>
        </view>
        <view class="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="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 class="uni-title">
          <text class="uni-title-text">同时存在 v-model 和 value</text>
        </view>
        <view class="input-wrapper">
          <input id="both-model-value" class="uni-input" v-model='demoValue' value='456'  />

        </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>
  <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>
<script lang="uts">
  export default {
    data() {
      return {
        title: 'input',
        showClearIcon: false,
        inputClearValue: '',
        showPassword: true,
        cursor: -1,
        cursor_color: "#3393E2",
        selectionStart: -1,
        selectionEnd: -1,
        inputEventDetail: '',
        focusAndBlurEventDetail: '',
        confirmEventDetail: '',
        keyboardHeightChangeEventDetail: '',
        focus: true,
        inputPassword: true,
        inputTypeTel: "tel",
        inputPlaceHolderStyle: "color:red",
        inputPlaceHolderClass: "uni-input-placeholder-class" as string.ClassString ,
        inputMaxLengthValue: "",
        onMaxLengthInputValue: "",
        inputMaxLengthFocus: false,
        inputPasswordValue: "",
        inputFocusKeyBoardChangeValue: true,
        holdKeyboard: false,
        keyboardHeight: 0,
        focusedForKeyboardHeightChangeTest: false,
        demoValue: '123',
        adjustPosition: false
      }
    },
    methods: {
      inputFocusKeyBoardChange(e : UniInputKeyboardHeightChangeEvent) {
        this.inputFocusKeyBoardChangeValue = e.detail.height > 50
      },
      onMaxLengthInput(event : UniInputEvent) {
        this.onMaxLengthInputValue = event.detail.value
      },
      setCursor: function (cursor : number) {
        (this.$refs['input'] as UniInputElement).focus();
        this.cursor = cursor;
      },
      onCursorBlurChange(){
        this.cursor = 0
      },
      setSelection: function (selectionStart : number, selectionEnd : number) {
        (this.$refs['input2'] as UniInputElement).focus();
        this.selectionStart = selectionStart;
        this.selectionEnd = selectionEnd;
      },
      onSelectionBlurChange(){
        this.selectionEnd = 0;
      },
      clearInput: function (event : UniInputEvent) {
        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 : UniInputEvent) {
        console.log("键盘输入", JSON.stringify(event.detail));
        this.inputEventDetail = JSON.stringify(event.detail)
      },
      onFocus: function (event : UniInputFocusEvent) {
        console.log("输入框聚焦", JSON.stringify(event.detail));
        this.focusAndBlurEventDetail = JSON.stringify(event.detail);
      },
      onBlur: function (event : UniInputBlurEvent) {
        console.log("输入框失去焦点", JSON.stringify(event.detail));
        this.focusAndBlurEventDetail = JSON.stringify(event.detail);
      },
      onConfirm: function (event : UniInputConfirmEvent) {
        console.log("点击完成按钮", JSON.stringify(event.detail));
        this.confirmEventDetail = JSON.stringify(event.detail);
      },
      onKeyborardHeightChange: function (event : UniInputKeyboardHeightChangeEvent) {
        console.log("键盘高度发生变化", JSON.stringify(event.detail));
        this.keyboardHeightChangeEventDetail = JSON.stringify(event.detail);
        this.keyboardHeight = event.detail.height;
      },
      test_check_input_value() : number {
        return this.onMaxLengthInputValue.length
      },
      changeCursorColor(event : UniSwitchChangeEvent) {
        const checked = event.detail.value;
        if (checked) {
          this.cursor_color = "red"
        } else {
          this.cursor_color = "#3393E2"
        }
        const input = uni.getElementById<UniInputElement>("uni-input-cursor-color")
        input?.focus()
      },
      changeHoldKeyboard(event : UniSwitchChangeEvent) {
        const checked = event.detail.value;
        this.holdKeyboard = checked
      },
      changeAdjustPosition(event : UniSwitchChangeEvent){
        const checked = event.detail.value;
        this.adjustPosition = checked
      }
    }
  }
</script>

<style scoped>
  .input-wrapper {
    display: flex;
    padding: 8px 13px;
    margin: 5px 0;
    flex-direction: row;
    flex-wrap: nowrap;
    background-color: #ffffff;
  }

  .uni-input {
    height: 28px;
    font-size: 15px;
    padding: 0px;
    flex: 1;
    background-color: #ffffff;
  }

  .uni-icon {
    width: 24px;
    height: 24px;
  }

  .uni-input-placeholder-class {
    font-size: 10px;
  }
</style>