微信小程序——获取文本框text、输入框input的数据

最新推荐文章于 2025-03-12 20:28:32 发布

时代新人

最新推荐文章于 2025-03-12 20:28:32 发布

阅读量1.4w

点赞数 3

分类专栏：小程序

本文链接：https://blog.csdn.net/u013184970/article/details/105288259

版权

小程序专栏收录该内容

11 篇文章

订阅专栏

本文详细介绍了在微信小程序中如何使用文本框(text)和输入框(input)组件，包括初始化赋值、获取数据及键盘输入事件的处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

开发中会遇到获取文本框text以及输入框input的数据，这里就来记录一下最基本的使用方法：

首先在.wxml里写好text和input两个组件

  <view class="inputname">
    <text class="textnormal">{{completed}}</text>
    <input class="textnormal" bindinput="name" value="{{name_value}}" placeholder="请输入名字"></input>
  </view>

text中的{{completed}}这个数据是要在.js文件的data里初始化赋值然后获取；

input中的bindinput是键盘输入时触发的事件，在此事件里获取输入的数据；value是输入框的初始内容，也在.js文件的data里初始化赋值；placeholder是输入框为空时占位符，相当于提示内容。

然后在.js文件里赋值获取

  /**
   * 页面的初始数据
   */
  data: {
    completed:"已完成",
    name_value:"",
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log("completed="+this.data.completed);
  },

  /**
   * 键盘输入时触发的事件  在这里实时获取输入的内容
   */
  name: function(res){
    console.log("输入的值为："+res.detail.value);//打印输入的值
    this.setData({
      name_value: res.detail.value//赋值给name_value
    })
  },