> 输入框是最为常见的组建之一，所以本文着重介绍下
## 属性说明
| 属性名 | 类型 | 默认值 | 说明 | 平台差异说明 |
| --- | --- | --- | --- | --- |
| value | String | | 输入框的初始内容 | |
| type | String | text | input 的类型 | H5 暂未支持动态切换请使用 v-if 进行整体切换 |
| password | Boolean | false | 是否是密码类型 | |
| placeholder | String | | 输入框为空时占位符 | |
| placeholder-style | String | | 指定 placeholder 的样式 | |
| placeholder-class | String | "input-placeholder" | 指定 placeholder 的样式类 | |
| disabled | Boolean | false | 是否禁用 | |
| maxlength | Number | 140 | 最大输入长度，设置为 -1 的时候不限制最大长度 | |
| cursor-spacing | Number | 0 | 指定光标与键盘的距离，单位 px 。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离 | App、微信小程序、百度小程序、QQ小程序 |
| focus | Boolean | false | 获取焦点。 | 在 H5 平台能否聚焦以及软键盘是否跟随弹出，取决于当前浏览器本身的实现。 |
| confirm-type | String | done | 设置键盘右下角按钮的文字，仅在 type="text" 时生效。 | |
| confirm-hold | Boolean | false | 点击键盘右下角按钮时是否保持键盘不收起 | App、微信小程序、支付宝小程序、百度小程序、QQ小程序 |
| cursor | Number | | 指定focus时的光标位置 | |
| selection-start | Number | \-1 | 光标起始位置，自动聚集时有效，需与selection-end搭配使用 | |
| selection-end | Number | \-1 | 光标结束位置，自动聚集时有效，需与selection-start搭配使用 | |
| adjust-position | Boolean | true | 键盘弹起时，是否自动上推页面 | App-Android（vue 页面 softinputMode 为 adjustResize 时无效）、微信小程序、百度小程序、QQ小程序 |
| hold-keyboard | boolean | false | focus时，点击页面的时候不收起键盘 | 微信小程序2.8.2 |
| @input | EventHandle | | 当键盘输入时，触发input事件，event.detail = {value} | 差异见下方 Tips |
| @focus | EventHandle | | 输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度 | 仅微信小程序、App（2.2.3+） 、QQ小程序支持 height |
| @blur | EventHandle | | 输入框失去焦点时触发，event.detail = {value: value} | |
| @confirm | EventHandle | | 点击完成按钮时触发，event.detail = {value: value} | |
| @keyboardheightchange | eventhandle | | 键盘高度发生变化的时候触发此事件，event.detail = {height: height, duration: duration} | 微信小程序2.7.0 |
## type 有效值
| 值 | 说明 | 平台差异说明 |
| --- | --- | --- |
| text | 文本输入键盘 | |
| number | 数字输入键盘 | 均支持，注意iOS上app-vue弹出的数字键盘并非9宫格方式 |
| idcard | 身份证输入键盘 | 微信、支付宝、百度、QQ小程序 |
| digit | 带小数点的数字键盘 | App的nvue页面、微信、支付宝、百度、头条、QQ小程序 |
## confirm-type 有效值
| 值 | 说明 | 平台差异说明 |
| --- | --- | --- |
| send | 右下角按钮为“发送” | 微信、支付宝、百度小程序、App的nvue |
| search | 右下角按钮为“搜索” | |
| next | 右下角按钮为“下一个” | 微信、支付宝、百度小程序、App的nvue |
| go | 右下角按钮为“前往” | |
| done | 右下角按钮为“完成” | 微信、支付宝、百度小程序、App的nvue |
## 隐藏输入框键盘
~~~
uni.hideKeyboard();
~~~
## 代码示例
> test.nvue
~~~
<template>
<view>
<view class="uni-common-mt">
<view class="uni-column">
<view class="title">可自动聚焦的input</view>
<input class="uni-input" focus placeholder="自动获得焦点" />
</view>
<view class="uni-column">
<view class="title">键盘右下角按钮显示为搜索</view>
<input class="uni-input" confirm-type="search" placeholder="键盘右下角按钮显示为搜索" />
</view>
<view class="uni-column">
<view class="title">控制最大输入长度的input</view>
<input class="uni-input" maxlength="10" placeholder="最大输入长度为10" />
</view>
<view class="uni-column">
<view class="title">实时获取输入值：{{inputValue}}</view>
<input class="uni-input" @input="onKeyInput" placeholder="输入同步到view中" />
</view>
<view class="uni-column">
<view class="title">控制输入的input</view>
<input class="uni-input" @input="replaceInput" v-model="changeValue" placeholder="连续的两个1会变成2" />
</view>
<!-- #ifndef MP-BAIDU -->
<view class="uni-column">
<view class="title">控制键盘的input</view>
<input class="uni-input" ref="input1" @input="hideKeyboard" placeholder="输入123自动收起键盘" />
</view>
<!-- #endif -->
<view class="uni-column">
<view class="title">数字输入的input</view>
<input class="uni-input" type="number" placeholder="这是一个数字输入框" />
</view>
<view class="uni-column">
<view class="title">密码输入的input</view>
<input class="uni-input" password type="text" placeholder="这是一个密码输入框" />
</view>
<view class="uni-column">
<view class="title">带小数点的input</view>
<input class="uni-input" type="digit" placeholder="带小数点的数字键盘" @confirm="numberDone" />
</view>
<!-- #ifdef MP -->
<view class="uni-column">
<view class="title">身份证输入的input</view>
<input class="uni-input" type="idcard" placeholder="身份证输入键盘" />
</view>
<!-- #endif -->
<view class="uni-column">
<view class="title">控制占位符颜色的input</view>
<input class="uni-input" adjust-position="false" placeholder-style="color:#F76260" placeholder="占位符字体是红色的,并且键盘不会上推页面" />
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: 'input',
focus: false,
inputValue: '',
changeValue: ''
}
},
methods: {
onKeyInput: function(event) {
this.inputValue = event.target.value
},
replaceInput: function(event) {
var value = event.target.value;
if (value === '11') {
this.changeValue = '2';
}
},
hideKeyboard: function(event) {
if (event.target.value === '123') {
uni.hideKeyboard();
}
},
numberDone: function(event) {
console.log(event)
uni.hideKeyboard();
}
}
}
</script>
~~~
- 基础知识
- UNI核心介绍
- flex布局
- 生命周期
- 全局方法
- 组件定义
- 自定义组件
- 全局组件
- 组件之间的数据传输
- 条件编译
- 自定义头部
- 节点信息 (SelectorQuery)
- vuejs基础语法
- 页面跳转以及参数传递
- 事件的监听注册以及触发
- css3动画
- block的妙用
- mixin (混入)
- uniapp快捷键
- vuex状态管理
- 实用功能
- 获取服务提供商
- 启动页 / 启动界面
- 引导页
- tabbar配置
- 头部导航栏基础设置
- 上拉下拉（刷新/加载）
- 第三方登录
- 第三方分享
- 推送通知 之 unipush
- scroll-view双联动
- 配置iOS通用链接（Universal Links）
- 本地缓存操作
- 升级/更新方案
- 热更新
- 图片上传
- 搜索页实现
- canvas绘图助手
- 地图定位
- 第三方支付————todo
- 分类轮播
- 清除应用缓存
- uniapp与webview的实时通讯
- 视频-----todo
- 聊天----todo
- 长列表swiper左右切换
- 第三方插件
- uview
- mescroll
- uCharts (图表)
- 无名 (更新插件)
- 第三方模版
- 自定义基座
- 打包发行
- 要封装的方法
- 缓存 cache.js
- 请求接口 request.js
- 工具类 util.js
- 小程序登录 xcxLogin.js
- 版本更新 update.js
- 优质插件
- 更新插件----todo
- 语音
- 语音识别 (含上传)
- 百度语音合成播报接口
- 官方常用组建
- input 输入框
- image 图片
- audio 音频
- picker 选择器
- video 视频
- scroll-view 滚动视图
- uni-app 地图全解析+事件监听