在博主印象中设置只读应该是readonly，太久没有写微信小程序，发现没有效果，
于是简单写篇文章记录下。
一、问题定位
微信小程序中，设置 readonly 属性后，input 组件仍然可以交互的常见原因：
- readonly 属性限制：仅阻止键盘输入，但仍可聚焦和长按复制
- 事件冒泡未处理：未阻止 touch/click 事件传播
- 样式冲突影响：CSS 可能覆盖了默认只读行为
二、核心解决方案
方案一：使用 disabled 替代
|
1 2 3 4 5 |
class="search-input" placeholder="请输入你需要搜索的型号" disabled /> |
特点：
- 完全禁止交互
- 组件变为灰色不可用状态
- 适用于表单禁用场景
方案二：事件阻止方案
|
1 2 3 4 5 6 |
class="search-input" placeholder="请输入你需要搜索的型号" bindtap="preventTap" catchtouchstart="preventTouch" /> |
|
1 2 3 4 5 6 7 8 9 10 |
Page({ preventTap(e) { // 阻止默认行为 return false; }, preventTouch(e) { // 阻止触摸事件 return false; } }) |
方案三：CSS 控制交互
|
1 2 3 4 5 6 7 8 9 10 11 |
/* 禁止所有交互 */ .search-input { pointer-events: none; -webkit-user-select: none; user-select: none; }
/* 仅禁止文本选择 */ .search-input { user-select: none; } |
三、替代方案推荐
方案一：使用 view 组件展示
|
1 2 3 |
请输入你需要搜索的型号
|
方案二：条件渲染
|
1 2 3 4 5 6 7 8 9 10 |
class="search-input" placeholder="请输入你需要搜索的型号" bindinput="onInput" />
|
四、最佳实践建议
根据具体场景选择方案：
- 纯展示场景 → 使用 view 组件
- 表单禁用场景 → 使用 disabled 属性
- 需要聚焦但不可编辑 → readonly + 事件阻止
- 临时只读需求 → CSS pointer-events: none
五、注意事项
- 真机测试：部分属性在模拟器和真机表现不同
- 样式适配：disabled 状态需考虑UI兼容性
- 用户体验：明确告知用户当前状态（如：置灰、提示文案）
- 版本兼容：确保基础库版本支持所用属性
六、完整示例代码
|
1 2 3 4 5 6 7 8 |
class="search-input readonly-style" placeholder="请输入你需要搜索的型号" readonly bindtap="preventAction" value="{{searchValue}}" /> |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
Page({ data: { searchValue: '' }, preventAction() { wx.showToast({ title: '当前不可编辑', icon: 'none' }) return false; } }) |
|
1 2 3 4 |
.readonly-style { background-color: #f5f5f5; color: #999; } |
