【小程序】微信小程序input设置readonly只读属性无效，这是怎么回事呢

🌹欢迎来到《小5讲堂》🌹

🌹这是《小程序》系列文章，每篇文章将以博主理解的角度展开讲解。🌹

🌹温馨提示：博主能力有限，理解水平有限，若有不对之处望指正！🌹
👨💻 作者简介

🏆 荣誉头衔：2024博客之星Top14 | CSDN博客专家 | 阿里云专家博主

🎤 经历 ：曾多次进行线下演讲，亦是 CSDN内容合伙人 以及 新星优秀导师

💡 信念 ："帮助别人，成长自己！"

🚀 技术领域：深耕全栈，精通 .NET Core (C#)、Python、Java，熟悉主流数据库

🤝 欢迎交流：无论是基础概念还是进阶实战，都欢迎与我探讨！

前言
- 一、问题定位
二、核心解决方案
- [方案一：使用 disabled 替代](#方案一：使用 disabled 替代)
- 方案二：事件阻止方案
- [方案三：CSS 控制交互](#方案三：CSS 控制交互)
三、替代方案推荐
- [方案一：使用 view 组件展示](#方案一：使用 view 组件展示)
- 方案二：条件渲染
四、最佳实践建议
五、注意事项
六、完整示例代码
推荐文章

前言

在博主印象中设置只读应该是readonly，太久没有写微信小程序，发现没有效果，

于是简单写篇文章记录下。

一、问题定位

微信小程序中，设置 readonly 属性后，input 组件仍然可以交互的常见原因：

readonly 属性限制：仅阻止键盘输入，但仍可聚焦和长按复制
事件冒泡未处理：未阻止 touch/click 事件传播
样式冲突影响：CSS 可能覆盖了默认只读行为

二、核心解决方案

方案一：使用 disabled 替代

html 复制代码

<input 
  class="search-input" 
  placeholder="请输入你需要搜索的型号"
  disabled
/>

特点：

完全禁止交互
组件变为灰色不可用状态
适用于表单禁用场景

方案二：事件阻止方案

html 复制代码

<input 
  class="search-input" 
  placeholder="请输入你需要搜索的型号"
  bindtap="preventTap"
  catchtouchstart="preventTouch"
/>

javascript 复制代码

Page({
  preventTap(e) {
    // 阻止默认行为
    return false;
  },
  preventTouch(e) {
    // 阻止触摸事件
    return false;
  }
})

方案三：CSS 控制交互

css 复制代码

/* 禁止所有交互 */
.search-input {
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

/* 仅禁止文本选择 */
.search-input {
  user-select: none;
}

三、替代方案推荐

方案一：使用 view 组件展示

html 复制代码

<view class="search-display">
  请输入你需要搜索的型号
</view>

方案二：条件渲染

html 复制代码

<view wx:if="{{isReadonly}}">
  <view class="search-text">{{searchValue}}</view>
</view>
<view wx:else>
  <input 
    class="search-input" 
    placeholder="请输入你需要搜索的型号"
    bindinput="onInput"
  />
</view>

四、最佳实践建议

根据具体场景选择方案：

纯展示场景 → 使用 view 组件
表单禁用场景 → 使用 disabled 属性
需要聚焦但不可编辑 → readonly + 事件阻止
临时只读需求 → CSS pointer-events: none

五、注意事项

真机测试：部分属性在模拟器和真机表现不同
样式适配 ：disabled 状态需考虑UI兼容性
用户体验：明确告知用户当前状态（如：置灰、提示文案）
版本兼容：确保基础库版本支持所用属性

六、完整示例代码

html 复制代码

<!-- 综合方案：readonly + 事件阻止 -->
<input 
  class="search-input readonly-style"
  placeholder="请输入你需要搜索的型号"
  readonly
  bindtap="preventAction"
  value="{{searchValue}}"
/>

javascript 复制代码

Page({
  data: {
    searchValue: ''
  },
  preventAction() {
    wx.showToast({
      title: '当前不可编辑',
      icon: 'none'
    })
    return false;
  }
})

css 复制代码

.readonly-style {
  background-color: #f5f5f5;
  color: #999;
}

按以上方案实施，可有效解决微信小程序中 input 组件只读属性失效问题。

【小程序】微信小程序input设置readonly只读属性无效，这是怎么回事呢

目录

前言

一、问题定位

二、核心解决方案

方案一：使用 disabled 替代

方案二：事件阻止方案

方案三：CSS 控制交互

三、替代方案推荐

方案一：使用 view 组件展示

方案二：条件渲染

四、最佳实践建议

五、注意事项

六、完整示例代码

推荐文章