uni-app input设置为disable,不能点击

1. input设置为disable,不能点击

1.1. 场景

  在开发中,我们经常会遇到需要禁用input框的情况,但是禁用后无法添加点击事件的问题。

         <!--从业情况-->
                <view class="base-form-item-layout">
                    <view class="base-form-item-mark">*</view>
                    <view class="base-form-item-title">从业情况:</view>
                    <picker @change="changePicker($event,'employmentSituation')"
                            :range="employmentSituationArr" range-key="dictValue">
                        <input class="base-form-item-input" disabled
                               v-model="formObj.employmentSituationLabel"
                               placeholder="请选择从业情况"/>
                    </picker>
                </view>

1.2. 解决方案

  在input框的父节点view中添加 style=“pointer-events:none” 即可。具体实现如下

         <!--从业情况-->
                <view class="base-form-item-layout">
                    <view class="base-form-item-mark">*</view>
                    <view class="base-form-item-title">从业情况:</view>
                    <picker @change="changePicker($event,'employmentSituation')"
                            :range="employmentSituationArr" range-key="dictValue">
                        <input class="base-form-item-input-click" style="pointer-events:none"
                               v-model="formObj.employmentSituationLabel"
                               placeholder="请选择从业情况"/>
                    </picker>
                </view>

在这里插入图片描述

1.3. 原理

  将view的点击事件覆盖在了input框上,使得input框不再响应点击事件,但是view仍然可以响应点击事件,从而达到了我们想要的效果。
  需要注意的是,这个方法只适用于禁用input框的情况,如果input框没有被禁用,使用这个方法可能会导致input框无法响应输入事件。

最近更新

  1. TCP协议是安全的吗?

    2024-03-13 06:18:01       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-03-13 06:18:01       18 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-03-13 06:18:01       17 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-03-13 06:18:01       20 阅读

热门阅读

  1. 2024华为OD机考面试经验分享

    2024-03-13 06:18:01       33 阅读
  2. C#常见的.Net类型(二)

    2024-03-13 06:18:01       22 阅读
  3. C#常见的.Net类型(一)

    2024-03-13 06:18:01       25 阅读
  4. 闲聊Swift的枚举关联值

    2024-03-13 06:18:01       18 阅读
  5. uView ui 安装步骤

    2024-03-13 06:18:01       23 阅读
  6. python异常应用

    2024-03-13 06:18:01       24 阅读
  7. 【https】how do they(server.crt server.key rootca.crt) work?

    2024-03-13 06:18:01       19 阅读
  8. 中间件面试题之ElasticSearch

    2024-03-13 06:18:01       22 阅读
  9. extern和static的使用与区别

    2024-03-13 06:18:01       22 阅读
  10. linux Shell 命令行-05-test 检查某个条件是否成立

    2024-03-13 06:18:01       23 阅读
  11. 【理解机器学习算法】之KNN(纯Python)

    2024-03-13 06:18:01       19 阅读
  12. 【无标题】

    2024-03-13 06:18:01       18 阅读