微信小程序文本输入＜input/＞详解_小程序 input-程序员宅基地

也许你迷茫，但是我想说，在你迷茫的同时，保持本心，过好今天就好。

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

1 基本使用

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

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

placeholder 输入框为空时的占位符
auto-focus 自动聚集，拉起键盘，需要注意的是一个页面中只能有一个 input 标签或者 textarea 来设置这个属性

在这里插入图片描述

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)
  },

效果
在这里插入图片描述

3 输入框焦点监听

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

bindfocus
bindblur 输入框焦点移出
bindconfirm 点击键盘的回车键或者是完成按钮时回调的事件

  <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 常用输入限制

disabled 默认为false 不禁用输入框，为true时是不可输入的

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

Page({
    

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

})

在这里插入图片描述

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

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

在这里插入图片描述

value 输入框初始内容

5 type 文本框输入内容格式

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

type 输入框可输入的数据类型


text	文本
number	数字纯数字键盘模式输入无小数点
idcard	数字数字键盘（无小数点、有个 X 键）
digit	数字带小数点的数字键盘模式输入

完毕

本文链接：https://blog.csdn.net/zl18603543572/article/details/121881363

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

Python 项目实战 —— 手把手教你使用 Django 框架实现支付宝付款_django 对接支付宝接口流程-程序员宅基地

文章浏览阅读1.1k次。今天小编心血来潮，为大家带来一个很有趣的项目，那就是使用 Python web 框架 Django 来实现支付宝支付，废话不多说，一起来看看如何实现吧。_django 对接支付宝接口流程

Zabbix 5.0 LTS在清理历史数据后最新数据不更新_zabbix问题没有更新-程序员宅基地

文章浏览阅读842次。Zabbix 5.0 LTS，跑了一年多了一直很稳定，前两天空间显示快满了，于是手贱清理了一下history_uint表（使用mysql truncate），结果折腾了一周。大概故障如下：然后zabbix论坛、各种群问了好久都没解决，最后自己一番折腾似乎搞定了。初步怀疑，应该是由于历史数据被清空后，zabbix需要去处理数据，但是数据量太大，跑不过来，所以来不及更新了（？）..._zabbix问题没有更新

python学习历程_基础知识（2day）-程序员宅基地

文章浏览阅读296次。一、数据结构之字典 key-value

mybatis-plus字段策略注解strategy_mybatisplus strategy-程序员宅基地

文章浏览阅读9.7k次，点赞3次，收藏13次。最近项目中遇到一个问题，是关于mybatis-plus的字段注解策略，记录一下。1问题调用了A组件（基础组件），来更新自身组件的数据，发现自己组件有个字段总是被清空。2原因分析调用的A组件的字段，属于基础字段，自己业务组件，对这个基础字段做了扩展，增加了业务字段。但是在自己的组件中的实体注解上，有一个注解使用错误。mybatis-plus封装的updateById方法，如果..._mybatisplus strategy

mx250显卡天梯图_2020年最新笔记本显卡天梯图，看看你的显卡排在哪！-程序员宅基地

文章浏览阅读1.5k次。显卡天梯图就是显卡的性能排行榜，目前显卡主要有Nvidia(英伟达)和AMD(超微半导体)两大品牌。我们都知道，显卡性能决定了电脑的图像处理能力。对于喜欢玩游戏的电脑用户来说，处理器和显卡是用户最关心的电脑硬件，一块好的显卡对于游戏的运行效率、画面显示会起到重要作用。下面小编就和大家分享一下2020年1月笔记本显卡天梯图，有需要的朋友可以参考参考。2020最新笔记本显卡天梯图以下就是2020年1月..._显卡geforce mx250和gtx1660

Java学习之一：断点调试_java如何打断电调试代码-程序员宅基地

文章浏览阅读2.6w次，点赞14次，收藏56次。我们在学习Java语言时由于一些语法错误或者个人书写错误导致程序不能正常运行，或者是程序正常运行但得到的运行结果不是理想的结果，这时候我们就需要对代码段进行断点调试了。设置断点是Java的基本功，下面我就来简单的介绍下断点的设置和运行。初学者常用的IDE是Eclipse和My Eclipse，本文用Eclipse为例。步骤一：在可能会导致程序非正常运行的代码行前打上断点。..._java如何打断电调试代码