全面分析uniappinput焦點

一、uniappinput焦點簡介

uniappinput焦點是指在uniapp開發中，輸入框組件的聚焦狀態，也就是當輸入框被選中時的狀態

在移動端開發中，輸入框是用戶的重要交互組件，而焦點狀態的表現對於用戶體驗有直接的影響，因此任何移動端開發都需要重視uniappinput焦點的相關問題

二、uniappinput焦點的主要問題

1、鍵盤遮擋輸入框

當用戶點擊輸入框時，鍵盤會彈出，如果此時輸入框處於屏幕底部，鍵盤會將其遮擋，導致用戶無法看到輸入內容，從而影響用戶體驗。此時需要通過滾動頁面等方式，將輸入框向上滑動，避免鍵盤遮擋

<template>
  <view>
    <input type="text" placeholder="請輸入" autofocus />
  </view>
</template>

<script>
  export default {
    onShow() {
      uni.getSystemInfo({
        success: (result) => {
          this.screenHeight = result.screenHeight;
        },
      })
    },
    mounted() {
      uni.createSelectorQuery()
        .in(this)
        .select(".input__box")
        .boundingClientRect((rect) => {
          this.deltaY = rect.bottom;
        })
        .exec();
    },
  }
</script>

<style scoped>
  .input__box {
    width: 100%;
    height: 50px;
    background-color: #fff;
    padding: 10px;
  }
</style>

2、iOS默認首字母大寫問題

在iOS設備中，如果輸入框未設置autocapitalize屬性，系統默認會將用戶輸入的內容進行首字母大寫處理，這種情況比較不利於用戶的輸入體驗。因此需要在輸入框屬性中明確設置該值，避免用戶輸入不符合要求的內容

<template>
  <view>
    <input type="text" placeholder="請輸入" autocapitalize="none" />
  </view>
</template>

<script>
  export default { }
</script>

<style scoped>
  input {
    width: 100%;
    height: 50px;
    background-color: #fff;
    padding: 10px;
  }
</style>

3、光標顏色問題

uniapp默認給輸入框的光標顏色是黑色，但是部分背景顏色較深的app中，用戶可能無法看清光標的位置和形狀。因此需要將光標顏色改為白色或者其他高對比度顏色，同時保證光標的大小適中，不影響用戶輸入和查看

<template>
  <view>
    <input type="text" placeholder="請輸入" />
  </view>
</template>

<script>
  export default { }
</script>

<style scoped>
  input {
    width: 100%;
    height: 50px;
    background-color: #000;
    padding: 10px;
    color: #fff;
  }
  /* 光標顏色設置 */
  input::-webkit-input-placeholder {
    color: #fff;
  }
  input:focus {
    caret-color: #fff;
  }
</style>

三、uniappinput焦點解決方案

1、解決鍵盤遮擋問題

為了解決鍵盤遮擋問題，可以通過監聽頁面的onShow事件，獲取當前頁面高度和輸入框高度，計算此時輸入框需要移動的距離，然後通過動態修改輸入框的transform屬性，將其在垂直方向上移動指定的距離，從而避免鍵盤遮擋

<template>
  <view>
    <view class="input__box" ref="inputBox">
      <input type="text" placeholder="請輸入" />
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        pageHeight: 0, // 頁面高度
        inputBoxHeight: 0, // 輸入框高度
        translateY: 0, // 縱向位移
      };
    },
    mounted() {
      // 獲取頁面高度
      uni.showNavigationBarLoading();
      uni.getSystemInfo({
        success: (res) => {
          this.pageHeight = res.windowHeight;
        },
        complete: () => {
          uni.hideNavigationBarLoading();
        },
      });
      
      // 獲取輸入框高度
      uni.createSelectorQuery().in(this).select('.input__box').boundingClientRect((res) => {
        this.inputBoxHeight = res.height;
      }).exec();
    },
    methods: {
      // 處理聚焦事件，防止鍵盤遮擋
      handleFocus() {
        uni.showKeyboard();
        setTimeout(() => {
          uni.createSelectorQuery().in(this).selectViewport().scrollOffset((res) => {
            if (this.inputBoxHeight > this.pageHeight - res.scrollTop - res.height) {
              this.translateY = this.pageHeight - res.scrollTop - res.height - this.inputBoxHeight - 20;
            }
          }).exec();
        }, 200);
      },
      // 處理失焦事件，還原位移
      handleBlur() {
        this.translateY = 0;
      },
    },
  };
</script>

<style scoped>
  .input__box {
    width: 100%;
    height: 50px;
    background-color: #fff;
    padding: 10px;
  }
  input {
    width: 100%;
    height: 100%;
    background-color: #f1f1f1;
    padding: 5px 10px;
    border-radius: 5px;
  }
  /* 解決iOS輸入框自動填充首字母大寫的問題 */
  input::first-letter {
    text-transform: lowercase !important;
  }
  /* 動態調整位移 */
  .input__box--active {
    transform: translateY({{ translateY }}px);
    transition: transform 0.2s;
  }
</style>

2、解決iOS默認首字母大寫問題

為了解決iOS設備輸入框默認首字母大寫問題，需要在輸入框屬性中設置autocapitalize=”none”，使其不進行自動大寫

<template>
  <view>
    <input type="text" placeholder="請輸入" autocapitalize="none" />
  </view>
</template>

<script>
  export default { }
</script>

<style scoped>
  input {
    width: 100%;
    height: 50px;
    background-color: #fff;
    padding: 10px;
  }
</style>

3、解決光標顏色問題

為了解決光標顏色問題，需要在輸入框樣式中將光標顏色修改為合適的顏色，可以使用CSS3的caret-color屬性，同時保證光標大小適中，不影響用戶輸入和查看

<template>
  <view>
    <input type="text" placeholder="請輸入" />
  </view>
</template>

<script>
  export default { }
</script>

<style scoped>
  input {
    width: 100%;
    height: 50px;
    background-color: #000;
    padding: 10px;
    color: #fff;
  }
  /* 光標顏色設置 */
  input::-webkit-input-placeholder {
    color: #fff;
  }
  input:focus {
    caret-color: #fff;
  }
</style>

四、總結

通過上述的分析和解決方案，我們可以看到uniappinput焦點在移動端app開發中的重要性和複雜性，需要開發者細心處理相應的問題，從而提高用戶的使用體驗