微信小程序input搜索解决中文问题(输入拼音) & 实时搜索节流处理(bindinput 节流)

问题

微信小程序输入拼音的时候, 还没有完全输入完成, bindinput就会触发, 当我输入"ni’hao", 还没有选定汉字"你好", 就已经触发了, 我想改成当选定"你好"后再触发

解决方案

bindinput 的detail中有一个 cursor 的属性，返回光标位置，可以根据此次输入时的cursor对比上一次的cursor 来判断, 键盘输入时触发，event.detail = {value, cursor, keyCode}

Page({/**
* 页面的初始数据
*/data: {searchValue: '',cursor: 0},inputOnchange: function(e) {if(e.detail.cursor != this.data.cursor) {this.setData({cursor: e.detail.cursor,searchValue: e.detail.value})console.log('确定输入内容' + this.data.searchValue)// 假设现在需要检测到用户输入的值，用户 500 毫秒内没有继续输入就将该值打印出来this.throttle(this.queryData, null, 500, this.data.searchValue);} else {console.log('输入拼音名没有确定输入内容, 不搜索')}},// 节流throttle: function (fn, context, delay, text) {clearTimeout(fn.timeoutId);fn.timeoutId = setTimeout(function () {fn.call(context, text);}, delay);},// 此处方法里面调用查询接口queryData: function (e) {console.log(e) // 打印 用户输入的值// // TODO 此处请求接口//},
})

WXML

<input class='search_input'maxlength='35'placeholder="输入关键词搜索"bindinput='inputOnchange'value='{{searchValue}}'bindconfirm='searchBtnClick'confirm-type='search'/>

微信小程序input搜索解决中文问题(输入拼音) 实时搜索节流处理(bindinput 节流)相关推荐

小程序数据框有重影_微信小程序input重影什么原因?怎么解决重影?
微信小程序input重影什么原因?怎么解决重影?微信小程序input输入框输入出现了重影的情况,这是什么原因呢?又该怎么去解决微信小程序input重影问题. 微信小程序input重影怎么办? 问题描述 ...
微信小程序 input 输入框控件 bindinput 没有响应
微信小程序 input 输入框控件 bindinput 没有响应问题: 微信小程序 input 输入框控件 bindinput 没有响应原因: 我以为是我这边的问题,检查很多遍检查不出来,最后换个 ...
微信小程序：页面传递中文出现乱码
微信小程序:页面传递中文 decodeURIComponent() 参考微信小程序页面中文传参Option获取参数乱码问题
微信小程序input框中加入小图标的实现方法
最近入坑小程序,要求在小程序的输入框中展示一个小图标,页面如下: 然后按照,html页面中的做法,在input框中添加了background-image属性,出乎意料的事,小程序报了下边这样一个错误: ...
微信小程序input为数字键盘
微信小程序input为数字键盘微信小程序的 input 有个属性叫 type,这个 type 有几个可选值: text:不必解释 number:数字键盘(无小数点) idcard:数字键盘(无小数点 ...
简单实现微信小程序 input 的双向绑定
简单实现微信小程序 input 的双向绑定 data 中定义表单数据 data:{formData:{} } wxml 中,利用 data- 传递参数到逻辑层 <input bindinput= ...
微信小程序input弹出键盘挡住文字的解决办法
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 解决思路:阻止键盘弹起时,自动上推页面.输入框获取焦点的时候让页面绝对定位,相对底部 100 像素.失去焦点的 ...
微信小程序input组件边框不显示问题的解决方法
问题情景在微信小程序开发中经常用到input组件,但是如果按下面的wxml代码去写,input的边框是不会显示的,只有在鼠标点过去的时候才会有个光标 <view class="set ...
web和微信小程序input输入时禁止输入中文方法
前言:作为一个小白--,每天进步一点点,每天总结一点点,生活就会美好一点- -------------------------------- 进入正文 1.首先禁止输入中文就需要用到正则表达式: 2. ...

微信小程序input搜索解决中文问题(输入拼音) 实时搜索节流处理(bindinput 节流)

微信小程序input搜索解决中文问题(输入拼音) & 实时搜索节流处理(bindinput 节流)

问题

微信小程序输入拼音的时候, 还没有完全输入完成, bindinput就会触发, 当我输入"ni’hao", 还没有选定汉字"你好", 就已经触发了, 我想改成当选定"你好"后再触发

解决方案

bindinput 的detail中有一个 cursor 的属性，返回光标位置，可以根据此次输入时的cursor对比上一次的cursor 来判断, 键盘输入时触发，event.detail = {value, cursor, keyCode}

微信小程序input搜索解决中文问题(输入拼音) 实时搜索节流处理(bindinput 节流)相关推荐

最新文章

热门文章

微信小程序input搜索解决中文问题(输入拼音) 实时搜索节流处理(bindinput 节流)

微信小程序input搜索解决中文问题(输入拼音) & 实时搜索节流处理(bindinput 节流)

问题

微信小程序输入拼音的时候, 还没有完全输入完成, bindinput就会触发, 当我输入"ni’hao", 还没有选定汉字"你好", 就已经触发了, 我想改成当选定"你好"后再触发

解决方案

bindinput 的detail中有一个 cursor 的属性，返回光标位置，可以根据 此次输入时的cursor对比上一次的cursor 来判断, 键盘输入时触发，event.detail = {value, cursor, keyCode}

微信小程序input搜索解决中文问题(输入拼音) 实时搜索节流处理(bindinput 节流)相关推荐

最新文章

热门文章

bindinput 的detail中有一个 cursor 的属性，返回光标位置，可以根据此次输入时的cursor对比上一次的cursor 来判断, 键盘输入时触发，event.detail = {value, cursor, keyCode}