微信小程序文本输入＜input/＞详解

柔情只为你懂 2023-10-07 17:36 61阅读 0赞

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

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

##### 1 基本使用 #####

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

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

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pep6LW355qE5bm06L275Lq6_size_20_color_FFFFFF_t_70_g_se_x_16]

##### 2 获取输入框中的内容 #####

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

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

对应的 js

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

效果  
![在这里插入图片描述][4ee8ebf903bb40ffb82e073734e63d96.gif_pic_center]

##### 3 输入框焦点监听 #####

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

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

对应的 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)
      },

效果图  
![在这里插入图片描述][9a77aa764e7d43af8ee887d01f13f483.gif_pic_center]

##### 4 常用输入限制 #####

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

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

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pep6LW355qE5bm06L275Lq6_size_20_color_FFFFFF_t_70_g_se_x_16 1]

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

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pep6LW355qE5bm06L275Lq6_size_20_color_FFFFFF_t_70_g_se_x_16 2]

*  value 输入框初始内容

##### 5 type 文本框输入内容格式 #####

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

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

<table> 
 <thead> 
  <tr> 
   <th></th> 
   <th></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>text</td> 
   <td>文本</td> 
  </tr> 
  <tr> 
   <td>number</td> 
   <td>数字 纯数字键盘模式输入 无小数点</td> 
  </tr> 
  <tr> 
   <td>idcard</td> 
   <td>数字 数字键盘（无小数点、有个 X 键）</td> 
  </tr> 
  <tr> 
   <td>digit</td> 
   <td>数字 带小数点的数字键盘模式输入</td> 
  </tr> 
 </tbody> 
</table>

--------------------

完毕

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pep6LW355qE5bm06L275Lq6_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/f555ee64473b4588a83909e6dfc49766.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5pep6LW355qE5bm06L275Lq6,size_20,color_FFFFFF,t_70,g_se,x_16
[4ee8ebf903bb40ffb82e073734e63d96.gif_pic_center]: https://img-blog.csdnimg.cn/4ee8ebf903bb40ffb82e073734e63d96.gif#pic_center
[9a77aa764e7d43af8ee887d01f13f483.gif_pic_center]: https://img-blog.csdnimg.cn/9a77aa764e7d43af8ee887d01f13f483.gif#pic_center
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pep6LW355qE5bm06L275Lq6_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/f128cd49f909464e8be81114ac5fd519.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5pep6LW355qE5bm06L275Lq6,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pep6LW355qE5bm06L275Lq6_size_20_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/e95e2dd139fe41eea36b3e9ef26e97b9.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5pep6LW355qE5bm06L275Lq6,size_20,color_FFFFFF,t_70,g_se,x_16