在 uniapp
中,input
组件常用的触发事件有以下几种:
-
@input
触发条件:用户输入时触发。
用法:绑定输入事件,常用于获取输入框的值。
示例:
html<input type="text" @input="handleInput" />
-
@focus
触发条件:输入框获得焦点时触发。
用法:在输入框获得焦点时执行某些操作,如改变样式或显示提示。
示例:
html<input type="text" @focus="handleFocus" />
-
@blur
触发条件:输入框失去焦点时触发。
用法:在输入框失去焦点时执行某些操作,常用于校验输入内容等。
示例:
html<input type="text" @blur="handleBlur" />
-
@confirm
触发条件:键盘确认键(如回车键)被按下时触发。
用法:通常用于提交表单或执行特定操作。
示例:
html<input type="text" @confirm="handleConfirm" />
-
@change
触发条件:输入框的内容发生变化时触发,通常用于文本框内容变化后的后续处理。
用法:监控输入框内容变化,并执行相关操作。
示例:
html<input type="text" @change="handleChange" />
-
@input
和@change
的区别
@input
会在每次输入时触发,而@change
是在输入框内容变化后触发。一般来说,@input
触发更频繁。 -
@keyup
/@keydown
触发条件:分别在键盘按键松开(keyup)和按下(keydown)时触发。
用法:用于捕获键盘事件,控制输入框行为。
示例:
html<input type="text" @keyup="handleKeyUp" />
-
@keypress
触发条件:用户按下一个字符键时触发。
用法:监控特定键的输入,通常用于防止输入非法字符等场景。
示例:
html<input type="text" @keypress="handleKeyPress" />
小结
常用的事件是 @input
、@focus
和 @blur
,它们分别用于获取输入值、处理焦点事件和失去焦点事件。根据你的需求,选择合适的事件进行绑定。