微信小程序系列——如何获取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)
},


相关文章
|
10月前
|
小程序 JavaScript
小程序怎么获取textarea的值?
小程序怎么获取textarea的值?
|
10月前
|
小程序 JavaScript
【微信小程序】-- WXML 模板语法 - 事件绑定 -- tap & input (十)
【微信小程序】-- WXML 模板语法 - 事件绑定 -- tap & input (十)
|
小程序
【组件】微信小程序input搜索框的实现
【组件】微信小程序input搜索框的实现
267 0
|
10月前
|
小程序 前端开发 Android开发
解决小程序中textarea ios端样式不兼容的两种方法
解决小程序中textarea ios端样式不兼容的两种方法
259 0
|
5月前
|
小程序 JavaScript
微信小程序之input组件及其获取用户输入信息
微信小程序之input组件及其获取用户输入信息
108 1
|
7月前
|
XML 小程序 JavaScript
|
7月前
|
小程序 JavaScript 索引
|
7月前
|
小程序 JavaScript 索引
小程序动态添加input及删除
【8月更文挑战第16天】
|
小程序
微信小程序扫描二维码的内容,作为参数跳转填入到下一个页面input框
微信小程序扫描二维码的内容,作为参数跳转填入到下一个页面input框
109 1
|
7天前
|
人工智能 自然语言处理 小程序
技术小白如何利用DeepSeek半小时开发微信小程序?
通过通义灵码的“AI程序员”功能,即使没有编程基础也能轻松创建小程序或网页。借助DeepSeek V3和R1满血版模型,用户只需用自然语言描述需求,就能自动生成代码并优化程序。例如,一个文科生仅通过描述需求就成功开发了一款记录日常活动的微信小程序。此外,通义灵码还提供智能问答模式,帮助用户解决开发中的各种问题,极大简化了开发流程,让普通人的开发体验更加顺畅。
技术小白如何利用DeepSeek半小时开发微信小程序?