微信小程序如何获取input文本框输入值（微信小程序input输入框）

在微信小程序开发中，input 用来实现文本输入，如输入用户名密码等等

微信小程序input输入框

1 基本使用

<input class="input" name="userName" placeholder="请输入用户名" auto-focus="true" />

基本效果就是显示了一个文本输入框。

2 获取输入框中的内容

bindinput 属性用来绑定键盘输入时的事件监听，也就是可以实时获取输入中的内容 。

当然 在你的处理函数中可以直接 return 一个结果来替换输入框中的内容。

  <input bindinput="userNameInputAction"  class="input" name="userName" placeholder="请输入用户名" auto-focus="true" />

对应的 js

  /**   * 输入框实时回调   * @param {*} options    */  userNameInputAction: function (options) {    //获取输入框输入的内容    let value = options.detail.value;    console.log("输入框输入的内容是 " + value)  },

在微信小程序开发中，input 用来实现文本输入，如输入用户名密码等等

1 基本使用

<inputclass="input"name="userName"placeholder="请输入用户名"auto-focus="true"/>

基本效果就是显示了一个文本输入框。

2 获取输入框中的内容

bindinput 属性用来绑定键盘输入时的事件监听，也就是可以实时获取输入中的内容 。

当然 在你的处理函数中可以直接 return 一个结果来替换输入框中的内容。

<inputbindinput="userNameInputAction"class="input"name="userName"placeholder="请输入用户名"auto-focus="true"/>

对应的 js

  /**   * 输入框实时回调   * @param {*} options    */  userNameInputAction: function (options) {    //获取输入框输入的内容    let value = options.detail.value;    console.log("输入框输入的内容是 " + value)  },

效果

3 输入框焦点监听

应用场景还是比较多的，比如输入结束时 去校验个数据什么的

  <input bindfocus="userNameFocusAction" bindblur="userNameBlurAction" bindconfirm="userNameConfirm" placeholder="请输入用户名" />

对应的 js

  userNameFocusAction: function (options) {    //输入框焦点获取    let value = options.detail.value;    console.log("输入框焦点获取 " + value)  },  userNameBlurAction: function (options) {    //输入框焦点移出    let value = options.detail.value;    console.log("输入框焦点移出 " + value)  },    userNameConfirm: function (options) {    //点击了键盘上的完成按钮    let value = options.detail.value;    console.log("点击了键盘上的完成按钮 " + value)  },

效果图

4 常用输入限制

<input disabled="{{isInput}}" placeholder="请输入用户名" />

Page({  /**   * 页面的初始数据   */  data: {    isInput:true  },})

password 默认为 false ，为true时，输入的内容为密码类型

<input  password="true" placeholder="请输入用户名" />

5 type 文本框输入内容格式

在HTML中，input组件中的type属性可以接收哪些值，有button、text、radio、checkbox、hidden、image、reset、submit等。而在微信小程序中，type属性只有text、number、idcard、digit、time和date。

上面就是小居数码小编今天给大家介绍的关于（微信小程序input输入框）的全部内容，希望可以帮助到你，想了解更多关于数码知识的问题，欢迎关注我们，并收藏，转发，分享。

94%的朋友还想知道的：

• 小程序修改主体名称步骤（小程序修改主体名称怎么改）
• 小程序如何引流到微信（小程序如何引流推广）
• 安装软件时出现乱码如何解决（安装程序出现乱码）
• java程序员必备软件和工具（最常用的java开发工具）

（327）个朋友认为回复得到帮助。