核心内容摘要
猎奇研究所2025终极进化：那些被掩盖的真相，正向你发出邀请
欢迎来到《小5讲堂》这是《小程序》系列文章每篇文章将以博主理解的角度展开讲解。
温馨提示博主能力有限理解水平有限若有不对之处望指正 作者简介 荣誉头衔2024博客之星Top14 | CSDN博客专家 | 阿里云专家博主 经历曾多次进行线下演讲亦是CSDN内容合伙人以及新星优秀导师 信念“帮助别人成长自己” 技术领域深耕全栈精通 .NET Core (C#)、Python、Java熟悉主流数据库 欢迎交流无论是基础概念还是进阶实战都欢迎与我探讨目录前言
问题定位
核心解决方案方案一使用 disabled 替代方案二事件阻止方案方案三CSS 控制交互
替代方案推荐方案一使用 view 组件展示方案二条件渲染
最佳实践建议
五、
注意事项
完整示例代码推荐文章前言在博主印象中设置只读应该是readonly太久没有写微信小程序发现没有效果于是简单写篇文章记录下。
问题定位微信小程序中设置readonly属性后input 组件仍然可以交互的常见原因readonly 属性限制仅阻止键盘输入但仍可聚焦和长按复制事件冒泡未处理未阻止 touch/click 事件传播样式冲突影响CSS 可能覆盖了默认只读行为
核心解决方案方案一使用 disabled 替代inputclasssearch-inputplaceholder请输入你需要搜索的型号disabled/特点完全禁止交互组件变为灰色不可用状态适用于表单禁用场景方案二事件阻止方案inputclasssearch-inputplaceholder请输入你需要搜索的型号bindtappreventTapcatchtouchstartpreventTouch/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 组件展示viewclasssearch-display请输入你需要搜索的型号/view方案二条件渲染viewwx:ifviewclasssearch-text/view/viewviewwx:elseinputclasssearch-inputplaceholder请输入你需要搜索的型号bindinputonInput//view
最佳实践建议根据具体场景选择方案纯展示场景→ 使用view组件表单禁用场景→ 使用disabled属性需要聚焦但不可编辑→readonly 事件阻止临时只读需求→ CSSpointer-events: none
五、
注意事项真机测试部分属性在模拟器和真机表现不同样式适配disabled状态需考虑UI兼容性用户体验明确告知用户当前状态如置灰、提示文案版本兼容确保基础库版本支持所用属性
完整示例代码!-- 综合方案readonly 事件阻止 --inputclasssearch-input readonly-styleplaceholder请输入你需要搜索的型号readonlybindtappreventActionvalue/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 core