我要评论
前言
在博主印象中设置只读应该是readonly，太久没有写微信小程序，发现没有效果，
于是简单写篇文章记录下。
一、问题定位
微信小程序中，设置 readonly 属性后，input 组件仍然可以交互的常见原因：
- readonly 属性限制：仅阻止键盘输入，但仍可聚焦和长按复制
- 事件冒泡未处理：未阻止 touch/click 事件传播
- 样式冲突影响：css 可能覆盖了默认只读行为
二、核心解决方案
方案一：使用 disabled 替代
<input class="search-input" placeholder="请输入你需要搜索的型号" disabled />
特点：
- 完全禁止交互
- 组件变为灰色不可用状态
- 适用于表单禁用场景
方案二：事件阻止方案
<input class="search-input" placeholder="请输入你需要搜索的型号" bindtap="preventtap" catchtouchstart="preventtouch" />
page({
preventtap(e) {
// 阻止默认行为
return false;
},
preventtouch(e) {
// 阻止触摸事件
return false;
}
})
方案三：css 控制交互
/* 禁止所有交互 */
.search-input {
pointer-events: none;
-webkit-user-select: none;
user-select: none;
}
/* 仅禁止文本选择 */
.search-input {
user-select: none;
}
三、替代方案推荐
方案一：使用 view 组件展示
<view class="search-display"> 请输入你需要搜索的型号 </view>
方案二：条件渲染
<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兼容性 - 用户体验：明确告知用户当前状态（如：置灰、提示文案）
- 版本兼容：确保基础库版本支持所用属性
六、完整示例代码
<!-- 综合方案：readonly + 事件阻止 -->
<input
class="search-input readonly-style"
placeholder="请输入你需要搜索的型号"
readonly
bindtap="preventaction"
value="{{searchvalue}}"
/>
page({
data: {
searchvalue: ''
},
preventaction() {
wx.showtoast({
title: '当前不可编辑',
icon: 'none'
})
return false;
}
})
.readonly-style {
background-color: #f5f5f5;
color: #999;
}
按以上方案实施，可有效解决微信小程序中 input 组件只读属性失效问题。
到此这篇关于微信小程序中input组件为什么设置readonly只读属性没有作用（失效）?的文章就介绍到这了,更多相关小程序input设置readonly失效内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！
发表评论