可以通过表单将输入框里的内容提取出来
~~~
<form class="form" bindsubmit="onConfirm">
<button class="btn" plain="{{true}}" formType="submit">提交</button>
<input type="text" auto-focus confirm-type="search" name="search" value="{{value}}" bindconfirm="onConfirm" placeholder="输入内容" />
</form>
~~~
由于提交按钮获取到的值的数据格式与通过输入框搜索/回车获取到的值的数据格式不同,所以会对其进行一次判断
~~~
Page({
data: {
value: ""
},
onConfirm(options){
var value = options.detail.value.search;
console.log(typeof(value));
if(typeof(value)!='string'){
var value = options.detail.value
}
if(value){
this.setData({
value: "",
})
}
} else{
wx.showToast({
title: '输入内容才能评论',
icon: 'none'
})
}
}
})
~~~
使用input输入框时的注意事项:
* confirm-type,可以设置键盘右下角的文字,仅在type="text"时生效,值有:send/search/next/go/done
* value,为输入框初始内容,可以在输入完成时设置value为空,达到自动清除输入内容的效果
* bindinput,键盘输入时触发
* bindfocus,输入框聚焦时触发
* bindblur,输入框失焦时触发
* bindconfirm,输入完成,提交时触发(本例中使用过)
- 小程序环境配置
- 1.生命周期
- 页面生命周期
- 组件生命周期
- 2.小程序组件
- 点击事件bindtap|catchtap
- swiper轮播
- wx:for循环
- 播放音乐
- map
- tabBar底部页面切换
- scroll-view可滚动视图区域。
- web-view装载显示网页
- priviewImage新页面预览照片
- chooseImage本地选择照片
- onReachBottom上拉刷新,加载等待条
- setStorage缓存
- showToast弹出提示框
- slot父组件wxml传递到子组件
- form表单
- 小程序.wxs,方法在.wxml调用
- 3.组件前身:模板、模板传参
- 4.自定义组件、组件传参|传wxss|wxml代码
- 5.小程序正则
- 6.小程序页面跳转
- 7.open-type 微信开放功能
- 实例
- 1.第一个实例 hello world
- 2.第二个实例豆瓣电影数据渲染
- 豆瓣1.0基本版
- 豆瓣2.0升级版
- 豆瓣3.0豪华版
- 3.第三个实例多接口在同一页面使用
- HTTP封装
- 基础报错提示,类式封装
- Promise回调,类式封装