微信小程序获取input值的方法

简介: 微信小程序获取input值的方法

1、bindinput

<input  bindinput='getInputValue'  name='price' type='text' placeholder='输入内容'></input>

其中 e.detail是获取input数据 其中包含value值, cursor是获取光标的位置。

getInputValue(e){
  console.log(e.detail)// {value: "ff", cursor: 2}  
}

2. bindsubmit

<form bindsubmit='loginForm'>
  <text class='login-title'>用户登录:</text>
  <input type='text' name='username' placeholder="请输入用户名"></input>
  <input type='password' name='password' placeholder="请输入账号密码"></input>
  <view class='ligin-button'>
    <button formType="submit" type='primary'>点击提交</button>
    <button formType="reset" type='primary'>重置数据表单</button>
  </view>
</form>

在js 中获取数据,通过data.detail.value获取数据,获得的是json对象数据键值对一一对应

loginForm: function(data) {
    console.log(data.detail.value)//  {username: "hgj", password: "fsdfsd"}
    var username = data.detail.value.username
    var password = data.detail.value.password;
}


目录
相关文章
|
1月前
|
存储 小程序 JavaScript
【微信小程序】-- 自定义组件 -- 数据、方法和属性(三十三)
【微信小程序】-- 自定义组件 -- 数据、方法和属性(三十三)
|
1月前
|
小程序 JavaScript
【微信小程序】-- WXML 模板语法 - 事件绑定 -- tap & input (十)
【微信小程序】-- WXML 模板语法 - 事件绑定 -- tap & input (十)
|
2月前
|
存储 缓存 小程序
小程序页面路由传参的方法?
小程序页面路由传参的方法?
|
2月前
|
小程序
微信小程序中识别HTML标签的方法
微信小程序中识别HTML标签的方法
|
2月前
|
存储 缓存 JSON
微信小程序使用本地存储方法
微信小程序使用本地存储方法
130 1
|
17天前
|
小程序 数据库
【微信小程序7】云开发中实时聊天系统的实现方法
【微信小程序7】云开发中实时聊天系统的实现方法
22 0
|
17天前
|
小程序
【微信小程序6】引入第三方UI的方法(ColorUi)
【微信小程序6】引入第三方UI的方法(ColorUi)
17 0
|
25天前
|
存储 小程序
小程序路由传参的方法?
小程序路由传参的方法?
10 0
|
15天前
|
小程序 前端开发 API
小程序全栈开发中的多端适配与响应式布局
【4月更文挑战第12天】本文探讨了小程序全栈开发中的多端适配与响应式布局。多端适配涉及平台和设备适应,确保统一用户体验;响应式布局利用媒体查询和弹性布局维持不同设备的布局一致性。实践中,开发者可借助跨平台框架实现多平台开发,运用响应式布局技术适应不同设备。同时,注意兼容性、性能优化和用户体验,以提升小程序质量和用户体验。通过这些方法,开发者能更好地掌握小程序全栈开发。
|
15天前
|
小程序 前端开发 API
微信小程序全栈开发中的异常处理与日志记录
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的异常处理和日志记录,强调其对确保应用稳定性和用户体验的重要性。异常处理涵盖前端(网络、页面跳转、用户输入、逻辑异常)和后端(数据库、API、业务逻辑)方面;日志记录则关注关键操作和异常情况的追踪。实践中,前端可利用try-catch处理异常,后端借助日志框架记录异常,同时采用集中式日志管理工具提升分析效率。开发者应注意安全性、性能和团队协作,以优化异常处理与日志记录流程。