本文分享的Input组件为uni-app的内置组件Input，非扩展组件，两者在用法上其实大同小异，只是扩展组件的属性以及事件更多…没有本质上的区别～

一. 简介

input，输入框组件，表单届的扛把子，几乎所有的表单都离不开input，一个表单可以没有radio，可以没有checkbox，但是几乎不大可能没有输入框，它 是表单组件中属于使用频率最高的一种，常见的业务场景包括登录时的用户名，密码以及注册时一大堆信息填写，只要是信息录入的功能第一选择基本都是输入框；
由于 input属性事件众多，本文仅仅针对实际应用频率较高的作详细分享，对于应用场景较少属性和事件会相对简略，耐心看完，你一定有所收获~

二. 基础用法

基础用法如下：

	<input />

非常简单，值得注意的是 input是一个单标签元素，使用闭合标签会在控制台报错～其表现形态 效果图 如下，可以在输入框中输入文字：

三. value属性与双向绑定

value值，用于 设置input中显示的默认值，具体说明如下：

换句话说，设置了value值的input组件将在加载的时候同步在输入框内显示对应的值，示例代码如下：

<input :value="value" />

<script>
export default {
	data() {
		return {
			value: '默认value属性'
		};
	}
};
</script>

其表现形态 效果图 如下：

但此时如果在输入框中输入值 并不会反向改变value的值，可以理解成这是一种 单向的数据流，input组件只能 被动显示value值对应的信息，如果想要 实现双向绑定，那么就需要借助vue中的 v-model指令，示例代码如下：

	<!-- value属性与双向绑定 -->
  <view class="input-group">
    <h4>value属性与双向绑定</h4>
    <input v-model="value" />
    {{ value }}
  </view>

通过 v-model双向绑定了value，并且在input的下方同步显示value对应的值，这样通过判断下方的显示值即可判断是否实现了数据流的双向绑定，其表现形态 效果图 如下：

四. type属性与password属性

type属性，用于控制输入框的类型，我们知道输入框的类型有很多种，最常见的就是登陆、注册界面的 用户名 和 密码 了，密码输入框中输入的所有值都会被替换成小圆点显示；
type值的具体说明如下：

以 number 为例，示例代码如下：

<view class="input-group">
  <h4>type number</h4>
  <input v-model="value" type="number" />
  {{ value }}
</view>

<script>
export default {
	data() {
		return {
			value: '默认value属性'
		};
	}
};
</script>

type="number" 的input框只能输入数字，对于非数字的值将会被过滤掉，其表现形态 效果图 如下：

默认的 value值为不可被转为数字的字符串，因此值将不会被显示在输入框中；
除了以上的type值外，还有一个比较特殊的值 password，该属性特殊在其并 不是直接设置在type中，而是直接 作为一个属性添加在input上，示例代码如下：

<input v-model="value" password />

其表现形态 效果图 如下：

五. placeholder、placeholder-style、placeholder-class属性

placeholder属性、placeholder-style属性、placeholder-class，用于控制input框无内容时的显示内容以及其样式，具体说明如下：

看个例子吧

<input v-model="value" placeholder="这是一段测试默认文字" />

其表现形态 效果图 如下：

当输入框内无输入内容时，会显示这段默认文字，存在内容时，内容文字覆盖默认文字，而
placeholder-style 和 placeholder-class 则是为这个默认文字 添加样式，这两个属性等同于html中的style属性 以及 class属性，用法几乎一致：

<input 
  v-model="value" 
  placeholder="这是一段测试默认文字" 
  placeholder-style="color:#e1e1e1;font-size:20px" />

其表现形态 效果图 如下：

六. disabled属性

disabled属性，用于将input设定为不可编辑状态，属性说明如下：

disabled 接收一个布尔值作为参数，当值为 true 的时候，该输入框将处于不可编辑的状态

<input v-model="value" placeholder="这是一段测试默认文字" :disabled="true" />

当然，这个值可以放在data中作为一个变量

<input v-model="value" placeholder="这是一段测试默认文字" :disabled="disabled" />

<script>
export default {
	data() {
		return {
			disabled: true
		};
	}
};
</script>

七. maxlength属性

maxlength属性，用于将input输入内容的上限，属性说明如下：

比如，我们限定该输入框的内容长度不可超过5，那么就可以如下设定属性

<input v-model="value" placeholder="这是一段测试默认文字" :maxlength="5" />

当输入内容长度超过5时，输入框将不可再输入内容

八. confirm-type属性与confirm-hold属性

confirm-type属性 与 confirm-hold属性，这两个属性主要 用于对键盘的控制，先看一下confirm-hold属性，该属性说明如下

设置该属性后，键盘点击右下按钮 将不会被收起，示例代码如下：

<input v-model="value" placeholder="这是一段测试默认文字" :confirm-hold="true" />

这里可能会有小伙伴不明白什么是键盘右下角的按钮，简单的说就是我们手机在输入的时候在小键盘右下角的按钮，这个按钮一般是类似于：发送，完成，搜索这种，如何设置这个按钮，这就是另外一个属性：confirm-type属性，它存在以下这些值

通过设置 confirm-type的值，可以控制键盘显示对应的文字内容，示例代码如下：

<input 
  v-model="value" 
  placeholder="这是一段测试默认文字" 
  :confirm-hold="true" 
  confirm-type="send"/>

这个示例就是将右下角的文字设置成 “发送”

九. @input事件

@input事件，该事件会在输入框内 输入内容时实时触发，事件官方说明如下：

举个例子，搜索框的联想功能像百度这种，每当用户输入一个单词都需要请求一次匹配最合适的搜索结果，那么就可以使用@input事件，示例代码如下：

<input placeholder="这是一段测试默认文字" @input="handleInput" />
{{ value }}

<script>
export default {
	methods: {
		handleInput(event) {
			this.value = event.detail.value;
		}
	}
};
</script>

其表现形态 效果图 如下：

看到这里，可能有小伙伴发现，这个效果怎么和上面的双向绑定这么像，其实v-model这个双向绑定针对input控件，内部也是通过@input事件实现的，大致实现如下：

<input placeholder="这是一段测试默认文字" :value="value" @input="handleInput" />

在绑定input事件的基础上额外给其增加了一个value属性

十. @focus事件与@blur事件

@focus事件 与 @blur事件，聚焦事件 与 失焦事件，我们知道输入框是有焦点的（简单的说就是是否有光标），获得焦点与失去焦点就会触发 @focus事件 与 @blur事件，事件说明如下：

接着，我们看一下示例代码：

<input 
  placeholder="这是一段测试默认文字" 
	@focus="handleFocus" 
	@blur="handleBlur" />

 <script>
export default {
	methods: {
		handleFocus(event) {
			console.log('聚焦事件');
		},
		handleBlur(event) {
			console.log('失焦事件');
		}
	}
};
</script>

其表现形态 效果图 如下：

通过控制台，我们可以看到 当输入框获得焦点与失去焦点时，分别触发了 @focus事件 与 @blur事件

十一. @confirm事件

@confirm事件，用于点击完成时触发，事件说明如下：

当我们 点击小键盘上的完成按钮 时，会 触发该事件，在业务场景上我们一般视这个操作等同于点击“确认”按钮，比如当处于登陆界面时，输入完用户名与密码，在小键盘上直接点击完成，即可触发登陆事件，不需要关闭小键盘，点击“登录”按钮进行账户的验证；
示例代码如下：

	<input placeholder="这是一段测试默认文字" @confirm="handleConfirm" />

 <script>
export default {
	methods: {
		handleConfirm(event) {
			console.log('点击完成按钮，触发事件');
		}
	}
};
</script>

十二. demo示例演示

12.1 示例说明

本节将实现一个demo，信息的编辑与预览，当信息处于编辑状态时输入框处于可编辑可输入的状态，当输入框处于预览状态时输入框处于不可编辑不可输入状态；
这个场景其实非常常见，举个例子，产品信息当登陆用户为管理员时，可以对产品信息进行修改编辑，但当登陆的用户为普通用户时，该信息不可编辑不可修改；
因此，本示例要实现的具体功能如下：一个button控制一个变量type，这个type将决定input是否可以处于可编辑状态；

12.2 实现代码

<view class="input-group">
  <h4>产品说明</h4>
  <input placeholder="产品说明" v-model="value" :disabled="type" />
</view>
<button @click="type = !type">{{ type ? '不可编辑' : '可编辑' }}</button>

<script>
export default {
	data() {
		return {
			value: '',
			type: false
		};
	},
	methods: {
		handleConfirm(event) {
			console.log('点击完成按钮，触发事件');
		}
	}
};
</script>

其表现形态 效果图 如下：

十三. 全属性详细说明

十四. 小结

由于使用频率的关系，本文主要分享了uni-app中内置组件input的一些主要属性，input组件中其实 最重要 的属性是 value属性 与双向绑定，从业务场景看，input承担的职责绝大多数都是信息录入的功能，那么如何获取输入的内容自然而然就变得最重要；
input作为表单组件中最为重要的基石之一，可以说掌握它起码就掌握了一半实际开发中的场景了，因此input组件一定要仔细学习；

(PS：都已经看到这里了，点个赞，求个关注吧，万分感谢～)