微信小程序系列——如何获取input和textarea的内容

简介: 微信小程序系列——如何获取input和textarea的内容

前言

input内容可以直接获取到,而textarea内容需要间接通过blur获取:

一、获取input的值

wxml:

<input type="text" class="input-val" bindinput ="searchInput" placeholder="请输入查询内容" maxlength='10' value="{{searchVal}}"/>


js:

searchInput:function(e){
  this.setData({
    searchVal: e.detail.value
  })
},


二、获取textarea的值

wxml表单:

<form bindsubmit="formSubmit" >
 <view class="add-text">
  <textarea bindblur="bindTextAreaBlur" auto-height placeholder="请输入texterea内容" value="{{inputVal}}" />
 </view> 
  <view class="insert-button">
    <button formType="submit">提交</button>
  </view>
</form>


js:

data: {
  inputVal: ""
},
bindTextAreaBlur: function(e) {
  this.setData({
    inputVal:e.detail.value
  }) 
},    
formSubmit: function(e) {
  console.log(that.data.inputVal)
},


相关文章
|
9月前
|
小程序 JavaScript
小程序怎么获取textarea的值?
小程序怎么获取textarea的值?
|
9月前
|
小程序 JavaScript
【微信小程序】-- WXML 模板语法 - 事件绑定 -- tap & input (十)
【微信小程序】-- WXML 模板语法 - 事件绑定 -- tap & input (十)
|
小程序
【组件】微信小程序input搜索框的实现
【组件】微信小程序input搜索框的实现
258 0
|
9月前
|
小程序 前端开发 Android开发
解决小程序中textarea ios端样式不兼容的两种方法
解决小程序中textarea ios端样式不兼容的两种方法
248 0
|
4月前
|
小程序 JavaScript
微信小程序之input组件及其获取用户输入信息
微信小程序之input组件及其获取用户输入信息
94 1
|
6月前
|
XML 小程序 JavaScript
|
6月前
|
小程序 JavaScript 索引
|
6月前
|
小程序 JavaScript 索引
小程序动态添加input及删除
【8月更文挑战第16天】
|
小程序
微信小程序扫描二维码的内容,作为参数跳转填入到下一个页面input框
微信小程序扫描二维码的内容,作为参数跳转填入到下一个页面input框
106 1
|
4月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
967 7

热门文章

最新文章