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

🌹欢迎来到《小5讲堂》🌹
🌹这是《小程序》系列文章，每篇文章将以博主理解的角度展开讲解。🌹
🌹温馨提示：博主能力有限，理解水平有限，若有不对之处望指正！🌹
👨💻 作者简介

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

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

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

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

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

前言

在博主印象中设置只读应该是readonly，太久没有写微信小程序，发现没有效果，
于是简单写篇文章记录下。

一、问题定位

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

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

二、核心解决方案

方案一：使用 disabled 替代

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

特点：

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

方案二：事件阻止方案

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

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

方案三：CSS 控制交互

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

三、替代方案推荐

方案一：使用 view 组件展示

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

方案二：条件渲染

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

四、最佳实践建议

根据具体场景选择方案：

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

五、注意事项

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

六、完整示例代码

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

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

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

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

推荐文章

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

【小程序】微信开发者工具上调用api接口可以，到了线上调用发现提示wx.request调用报错，原来是https协议问题

【小程序】微信小程序开发，给用户发送一次性订阅消息，常见参数长度和数据类型说明，你值得收藏

【小程序】微信小程序开发，分享给朋友或者朋友圈的功能增加地址参数，以及如何进行带参数本地测试

【小程序】.net core2.1对接微信支付开发时自己挖的坑

【前端】微信小程序，同名图片缓存问题，增加图片后缀动态参数值解决

【小程序】常用方法、知识点汇总1

【腾讯云】AI驱动TDSQL-C Serveress 数据库技术实战营-如何是从0到1体验电商可视化分析小助手得统计功能，一句话就能输出目标统计图

【随笔】博客质量分计算，如何让自己的博客脱颖而出，也许文章能够给你答案

【Sql Server】sql server 2019设置远程访问，外网服务器需要设置好安全组入方向规则

【千帆AppBuilder】零代码+组件+代码节点方式实现AI应用《法定退休年龄计算器》

【1024程序员节】分享下博主的AI应用之旅，有哪些好玩有趣的智能体呢，不妨一起探索下