【微信小程序】公共方法实现实时捕捉input输入

最新推荐文章于 2024-06-28 13:54:31 发布
最新推荐文章于 2024-06-28 13:54:31 发布
阅读量2.8k 收藏 2
点赞数
分类专栏： 前端开发综合 微信小程序 微信小程序Step by step 前端开发项目问题解决方案 文章标签： 微信小程序 实时获取input输入 公共方法 数据绑定
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nongweiyilady/article/details/82978786
版权
在微信小程序项目中，由于不支持双向绑定，需要手动实现用户输入时实时获取值的功能。通过在wxml中设置input的bindinput事件，并在js中创建一个公共方法，利用setData的key动态特性，根据传入的key更新对应的数据，从而达到实时获取input值的效果。此方法适用于多个input的情况。
摘要由CSDN通过智能技术生成

项目中，一个表单中经常有好几个input，但是微信小程序并不像vue那样实现双向绑定，所以我们要自己去实现当用户输入的时候，实时获取用户输入的值。
方法比较简单，就两个步骤。

1.wxml

  <input data-name='form.base.name'  bindinput="inputChange" name="te
最低0.47元/天 解锁文章
Tiramisu_C
关注
专栏目录
微信小程序input框中加入小图标的实现方法
12-29
最近入坑小程序，要求在小程序的...然后另辟蹊径，由于小程序中，好像只有image标签才能加载本地图片，所以考虑使用image标签来实现，大致思路就是在一个view中，左边是image,右边是input框，wxml页面如下: <vi
小程序或js，判断变量（Undefined String Array Object）是否为空
NOT NULL
11-25 2万+
关键代码function isBlank(str){ if (Object.prototype.toString.call(str) ==='[object Undefined]'){//空 return true } else if ( Object.prototype.toString.call(str) === '[object String]' || Obj
【微信小程序】基础篇 -- WXML 模板语法 - 事件绑定 -- tap & input （十）
JMFive的博客
02-27 3898
大家好，又见面了，我是夜阑的狗🐶，本文是专栏【微信小程序开发教程】专栏的第10篇文章;今天开始学习微信小程序的第五天💖💖💖，开启新的征程，记录最美好的时刻🎉，每天进步一点点。【微信小程序开发教程】， 此专栏是我是夜阑的狗微信小程序开发过程的总结，希望能够加深自己的印象，以及帮助到其他的小伙伴😉😉。如果文章有什么需要改进的地方还请大佬不吝赐教👏👏。在一起学习小程序里事件怎么绑定之前，首先先来了解一下什么是事件？事件是渲染层到逻辑层的通讯方式。
微信小程序input事件和一些常用事件
最新发布
weixin_74460913的博客
06-28 683
【代码】input事件和一些常用事件。
小程序----实时检测input输入值
qq_43983650的博客
12-16 782
直接上代码 wxml <input type='text' bindinput="valueInput" value='{{searchValue}}' focus="{{focus}}" placeholder='商品名称/订单号' placeholder-class='placeholder' bindinput='setValue'></input> js valueInput:function(e){ this.setData({
微信小程序-如何实时监控input等组件输入字数？【亲测有效】
**My Coding Family**
04-03 2619
微信小程序-如何实时监控input等组件输入字数？亲测有效，手把手教学
小程序输入实时搜索
cczsmile的博客
04-10 644
wxml <view class="search"> <view class="searchBar"> <view class="searchWrap"> <icon type="search" size="16" class="iconSearch" /> <input ...
微信小程序 input输入及动态设置按钮的实现
08-29
微信小程序 input 输入及动态...本文详细介绍了微信小程序 input 输入控件的基本使用方法和动态设置按钮的实现，并提供了相关的代码示例，以便帮助开发者更好地理解和实现微信小程序 input 输入及动态设置按钮的功能。
微信小程序实现提交input信息到后台的方法示例
10-17
主要介绍了微信小程序实现提交input信息到后台的方法,结合实例形式分析了微信小程序提交input信息到后台相关事件响应与数据处理操作技巧,需要的朋友可以参考下
微信小程序下拉框搜索功能的实现方法
12-08
在微信小程序开发中，下拉框搜索功能是一个常见的交互元素，尤其在用户需要从大量数据中筛选信息时显得尤为重要。本文将详细介绍如何实现这样一个功能，包括关键的代码结构和自定义方法。 首先，我们需要理解微信小...
小程序基本命令
aiven1637的博客
10-30 3312
onLoad: function () { // 生命周期函数--监听页面加载 onReady: function () { // 生命周期函数--监听页面初次渲染完成 }, onShow: function () { // 生命周期函数--监听页面显示 }, onHide: function () { // 生命周期函数--监...
小程序input组件事件tap、input、focus、blur触发顺序
你那里开花了吗
07-04 2万+
  微信小程序表单组件中的input组件应该是很常用的一个组件了，经常用到难免会要用上各种事件，这里说几个最常用的和执行顺序问题，这个没弄清楚很容易出现意料之外的结果。   先来看看这几个事件。tap事件：这个是小程序中的点击事件，绑定语法是bindtap，微信小程序中每个组件都是有tap事件的；input事件：是键盘输入事件，绑定语法是bindinput；focus事件：输入框聚焦事件，绑定语法...
微信小程序 多个input点击按钮添加和删除
heavenz19的博客
04-25 1715
微信小程序 多个input添加和删除 效果图展示 xml注意事项： input中添加 value=’{{names[index+1]}}’ data-index=’{{index}} bindblur=“bindinput”' <view class="adds"> <view class="lis"> <view class="title">货品名称</view> <input type="text"
微信小程序实现动态检索功能
路边行者的博客
09-28 2022
使用微信小程序实现输入文字，动态检索数组内某个字段所有符合输入文字的数据； wxml <input type="text" value="{{name}}" placeholder="请输入姓名进行检索……" bindinput="NameInput" /> js var app = getApp() Page({ data: { infoList :[ {id:1,Name:"张三",age:16}, {id:2,Name:"李四",age:15} {id:3,Nam
怎样捕捉 Delete 键
jiujiea6543的专栏
12-16 556
怎样捕捉 Delete 键 　　在NN6里，当你按下 Delete 键时，会触发 onkeydown, onkeypress, 和 onkeyup 事件，可以用 event.which == 46 来进行捕捉。 　　但在IE5里，当按下 Delete 键时，只触发 onkeydown 和 onkeyup 事件，而不会触发 onkeypress 事件，可以通过 event
微信小程序监听 input 的 输入值
ZkD953的博客
09-11 6416
wxml &lt;view class='search_input'&gt; &lt;input value='{{search}}' placeholder='搜索整改说明...' bindblur='changeSearch' bindconfirm='changeSearch' bindinput='changeSearch'&gt;&lt;/input&gt...
微信小程序获取input值的两种常用方式
热门推荐
June.1
04-16 5万+
1. bindinput 事件是光标移动发生数据改变,不需要手动执行点击 。 数据自动获取 input框内使用属性的方式定义事件名称 <input bindinput='getInputValue' name='price' type='text' placeholder='输入内容'></input> 在js 文件中定义事件方法获取数据 其中 e.detai...
小程序-获取input值的方法
TC_DESpipi的博客
08-13 1万+
微信小程序-获取input值的方法
微信小程序监听input框
weixin_34364071的博客
02-06 1852
2019独角兽企业重金招聘Python工程师标准>>> ...
微信小程序快速实现WebSocket实时通信：GoEasy教程
"微信小程序利用GoEasy实现websocket实时通讯的教程，通过实例代码详细讲解了如何在小程序中快速建立实时通信功能，无需自建websocket服务。文中提到了GoEasy提供的不同类型的appkey，并提供了开源的Demo源代码供...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值