全面分析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开发中的重要性和复杂性，需要开发者细心处理相应的问题，从而提高用户的使用体验