🌹欢迎来到《小5讲堂》🌹 🌹这是《小程序》系列文章，每篇文章将以博主理解的角度展开讲解。🌹 🌹温馨提示：博主能力有限，理解水平有限，若有不对之处望指正！🌹 👨💻 作者简介
🏆 荣誉头衔：2024博客之星Top14 | CSDN博客专家 | 阿里云专家博主
🎤 经历：曾多次进行线下演讲，亦是 CSDN内容合伙人 以及 新星优秀导师
💡 信念：“帮助别人，成长自己！”
🚀 技术领域：深耕全栈，精通 .NET Core (C#)、Python、Java，熟悉主流数据库
🤝 欢迎交流：无论是基础概念还是进阶实战，都欢迎与我探讨！
目录
- 前言
-
- 一、问题定位
- 二、核心解决方案
-
- 方案一：使用 disabled 替代
- 方案二：事件阻止方案
- 方案三：CSS 控制交互
- 三、替代方案推荐
-
- 方案一：使用 view 组件展示
- 方案二：条件渲染
- 四、最佳实践建议
- 五、注意事项
- 六、完整示例代码
- 推荐文章
前言
在博主印象中设置只读应该是readonly，太久没有写微信小程序，发现没有效果， 于是简单写篇文章记录下。
一、问题定位
微信小程序中，设置 readonly 属性后，input 组件仍然可以交互的常见原因：
二、核心解决方案
方案一：使用 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>
四、最佳实践建议
根据具体场景选择方案：
五、注意事项
六、完整示例代码
<!– 综合方案：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只读属性无效，这是怎么回事呢
【小程序】微信开发者工具上调用api接口可以，到了线上调用发现提示wx.request调用报错，原来是https协议问题
【小程序】微信小程序开发，给用户发送一次性订阅消息，常见参数长度和数据类型说明，你值得收藏
【小程序】微信小程序开发，分享给朋友或者朋友圈的功能增加地址参数，以及如何进行带参数本地测试
【小程序】.net core2.1对接微信支付开发时自己挖的坑
【前端】微信小程序，同名图片缓存问题，增加图片后缀动态参数值解决
【小程序】常用方法、知识点汇总1
【腾讯云】AI驱动TDSQL-C Serveress 数据库技术实战营-如何是从0到1体验电商可视化分析小助手得统计功能，一句话就能输出目标统计图
【随笔】博客质量分计算，如何让自己的博客脱颖而出，也许文章能够给你答案
【Sql Server】sql server 2019设置远程访问，外网服务器需要设置好安全组入方向规则
【千帆AppBuilder】零代码+组件+代码节点方式实现AI应用《法定退休年龄计算器》
【1024程序员节】分享下博主的AI应用之旅，有哪些好玩有趣的智能体呢，不妨一起探索下
