安卓14系统中input中点击事件无法应用到整个输入框

Question

安卓系统升级到安卓14后，原本应用表单中的input点击输入框不再是整个输入框，而是最右侧一块地方，如何实现整个输入框点击事件有效？如果去掉disabled，点击事件是整个输入框，但是会跳出键盘，如何取消键盘呢？
```html
<view class="cu-form-group" >
    <view class="title input_tag">工单编号</view>
    <input placeholder="请选择工单编号" v-model="formData.orderNo" name="input" @click="toChooseWorkOrder" disabled"></input>
</view>

```

Answer 1

引自免费微信小程序：皆我百晓生

在Android 14系统中，您遇到的问题可能与输入框的焦点捕获和点击区域有关。Vue.js中的disabled属性会禁用输入框，这意味着它不会触发键盘弹出，但同时也可能会改变可点击区域。

为了解决整个输入框都能响应点击事件，并且不弹出键盘的问题，您可以尝试以下方法：

<template>
  <view class="cu-form-group">
    <view class="title input_tag">工单编号</view>
    <view @click.stop="toChooseWorkOrder" class="input-placeholder-wrapper">
      <input 
        placeholder="请选择工单编号" 
        v-model="formData.orderNo" 
        readonly 
        :style="{ pointerEvents: 'none' }"
      ></input>
    </view>
  </view>
</template>

<script>
export default {
  methods: {
    toChooseWorkOrder() {
      // 在此处实现选择工单编号的功能逻辑
    }
  }
}
</script>

<style scoped>
.input-placeholder-wrapper {
  width: 100%;
  height: inherit; /* 根据设计调整合适的高度 */
  display: flex;
  align-items: center;
  cursor: pointer;
}
</style>

在这个解决方案中：

1. 将点击事件绑定到包裹输入框的view上：通过在外层<view>标签上添加@click.stop来监听整个区域的点击事件，并阻止冒泡。

2. 设置input为只读readonly：这将允许用户看到输入框但不会唤起键盘。

3. CSS样式：创建一个.input-placeholder-wrapper类用于模拟输入框的外观，并设置其宽度为100%，使其占据容器的全部宽度。

4. pointer-events:none：对<input>标签应用此CSS样式以阻止其自身的鼠标或触摸事件，确保点击事件由外层view处理。

这样，即使在安卓14系统下，也能确保整个输入框区域响应点击事件，并且不会弹出键盘。