介绍

<input> 是小程序原生表单输入组件，用于单行文本输入（用户名、手机号、搜索、密码等），属于原生组件，部分CSS伪类、层级会有限制。

最小可用示例

<!-- pages/index/index.wxml -->
<input placeholder="请输入文字" />

常用属性

输入类型 type

控制显示哪类键盘

type 值	作用
text	普通文本键盘（默认）
number	纯数字键盘
digit	数字+小数点（金额）
idcard	身份证键盘（带X）
nickname	昵称输入（带表情）
safe-password	安全密码键盘

<input type="number" placeholder="请输入手机号"/>
<input type="digit" placeholder="请输入金额"/>
<input type="idcard" placeholder="身份证"/>

基础属性

placeholder：空值占位提示文字
password="{{true}}"：密码框，内容圆点隐藏
maxlength="11"：最大输入字符限制

高级属性

value="{{变量}}"：绑定初始值（单向绑定）
model:value="{{变量}}"：简易双向绑定（推荐，v-model平替，基础库2.9.3+）
disabled="{{true}}"：禁用输入，灰色不可点击

焦点相关

auto-focus：页面加载自动唤起键盘（一页只能一个）
focus="{{isFocus}}"：动态控制焦点（JS控制唤起/收起键盘）

键盘确认按钮 confirm-type

修改键盘右下角按钮文字：

done：完成（默认）
search：搜索（搜索框专用）
send：发送（聊天）
next：下一项
go：前往

<input confirm-type="search" bindconfirm="onSearch" placeholder="搜索商品"/>

四大核心事件

所有事件回调参数 e.detail 包含输入值、键盘高度等信息。

bindinput：每输入一个字符实时触发
- e.detail.value：当前输入内容
- 支持 return 字符串替换输入内容（过滤非法字符）
bindfocus：输入框获得焦点（键盘弹出）
- e.detail.height：弹出键盘高度（适配布局）
bindblur：失去焦点（键盘收起）
bindconfirm：点击键盘右下角确认按钮触发（提交、搜索）

完整事件示例（WXML+JS）

<input 
  model:value="{{name}}"
  placeholder="请输入姓名"
  maxlength="10"
  bindinput="handleInput"
  bindfocus="handleFocus"
  bindblur="handleBlur"
  bindconfirm="handleSubmit"
/>
<view>当前输入：{{name}}</view>

// pages/index/index.js
Page({
  data: {
    name: "",
    keyboardH: 0
  },
  // 实时输入
  handleInput(e) {
    const val = e.detail.value
    console.log("实时输入：", val)
    // 过滤数字，只保留文字
    return val.replace(/[0-9]/g, "")
  },
  // 获取焦点
  handleFocus(e) {
    this.setData({ keyboardH: e.detail.height })
    console.log("键盘高度", e.detail.height)
  },
  // 失去焦点
  handleBlur() {
    console.log("输入框失焦")
  },
  // 键盘确认提交
  handleSubmit() {
    wx.showToast({ title: "提交：" + this.data.name })
  }
})

两种数据绑定方式

方式1：简易双向绑定 model:value（推荐）

无需手动 setData，输入自动同步到data，代码极简

<input model:value="{{phone}}" placeholder="手机号"/>

Page({ data: { phone: "" } })

方式2：单向绑定 + bindinput（兼容低版本基础库）

老版本无model时使用，手动同步数据

<input value="{{phone}}" bindinput="syncPhone"/>

Page({
  data: { phone: "" },
  syncPhone(e) {
    this.setData({ phone: e.detail.value })
  }
})

美化 WXSS 通用模板

input 是原生组件，:focus 伪类安卓不生效，改用动态class实现聚焦样式

/* 通用输入框样式 */
.input-box {
  width: 90%;
  height: 80rpx;
  padding: 0 20rpx;
  border: 1rpx solid #eee;
  border-radius: 10rpx;
  margin: 20rpx auto;
}
/* 占位文字颜色 */
.placeholder-text {
  color: #ccc;
}
/* 聚焦高亮边框 */
.input-focus {
  border-color: #07c160;
}

搭配动态class：

<input 
  class="{{isFocus ? 'input-box input-focus' : 'input-box'}}"
  placeholder-class="placeholder-text"
  bindfocus="setFocusTrue"
  bindblur="setFocusFalse"
/>

setFocusTrue(){ this.setData({isFocus:true}) },
setFocusFalse(){ this.setData({isFocus:false}) }

六、实战场景完整代码

场景1：密码框（显示/隐藏密码）

<view class="input-box">
  <input 
    password="{{!showPwd}}"
    model:value="{{pwd}}"
    placeholder="请输入密码"
  />
  <!-- 点击切换显隐 -->
  <text catchtap="togglePwd">{{showPwd ? '隐藏' : '显示'}}</text>
</view>

data: { pwd: "", showPwd: false },
togglePwd() {
  this.setData({ showPwd: !this.data.showPwd })
}

场景2：带清除按钮搜索框

核心：catchtap 阻止blur提前触发清空按钮点击失效问题

<view class="search-wrap">
  <input 
    model:value="{{keyword}}"
    confirm-type="search"
    bindconfirm="search"
    placeholder="搜索"
  />
  <!-- 有内容才显示清除按钮 -->
  <text wx:if="{{keyword}}" catchtap="clearInput">×</text>
</view>

data: { keyword: "" },
// 清空并保持焦点
clearInput() {
  this.setData({ keyword: "" }, () => {
    this.selectComponent("#searchInput").focus()
  })
},
search() {
  console.log("搜索关键词：", this.data.keyword)
}

场景3：防抖实时搜索（防频繁请求接口）

data: { keyword: "", timer: null },
handleSearchInput(e) {
  // 清除上一次延时
  clearTimeout(this.data.timer)
  const val = e.detail.value
  // 300ms后执行搜索，停止输入才请求
  const timer = setTimeout(() => {
    if(val) this.requestSearch(val)
  }, 300)
  this.setData({ timer })
},
requestSearch(keyword) {
  // 调后端搜索接口
  console.log("发起搜索", keyword)
}

七、高频踩坑与解决方案

键盘弹出遮挡输入框
方案：设置 cursor-spacing="150"，或监听bindfocus键盘高度动态给页面底部加padding
autofocus 不生效（真机iOS）
限制：真机不允许页面自动唤起键盘，必须用户手动点击；仅模拟器可用
清除按钮点击先触发blur，清空失效
解决：清除按钮用 catchtap 代替bindtap阻止冒泡
:focus CSS伪类无效
原因：input原生组件，不支持web伪类；改用bindfocus动态切换class
focus=”{{变量}}” 动态聚焦失效
解决：setData回调中使用 this.nextTick(()=>this.selectComponent('#inp').focus())
model:value 不支持多层对象（如user.name）
限制：仅支持单层变量，多层需改用 value + bindinput 手动赋值
输入数字带小数点丢失0
type=”digit” 配合bindinput做字符串过滤，不要转Number

八、官方文档参考

https://developers.weixin.qq.com/miniprogram/dev/component/input.html

需要我给你一份可直接复制使用的登录页完整input表单模板（手机号+密码+表单校验+提交）吗？

原文出处：/show_1GW3XK8my7N7.html