微信小程序文本输入<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

相关推荐

JavaScript进阶内容——BOM详解

Vue详解知识概括

叮!您要的‘this绑定规则’来了

JavaScript必须掌握的四大基础知识(数据类型、原型和原型链、闭包、异步 promise)

JavaScript进阶内容——DOM详解

「React进阶」React中没有keepalive?没事!手把手教你从零到一设计并实现一个!

JavaScript基础系列(6):`this`这六种使用方式

回忆曾跨过的坎:详尽解析前端性能优化体系(一)

[教你做小游戏] 只用几行原生JS,写一个函数,播放音效、播放BGM、切换BGM

我在腾讯这一年

趣味Canvas之时钟⏰

Chrome插件开发教程

我的灿烂前端人生

JavaScript 中的单例内置对象(Global & Math)

JavaScript:聊聊作用域、作用域链与它的一些优化

『JavaScript从零开始』防抖与节流

ES6 类聊 JavaScript 设计模式之创建型模式

玩转React基础 Hook

用原生JS写一个简易版的台球

(建议收藏)JS中5个处理树结构数据的常用方法及如何将其发布到npm上的教程讲解