【小鸡案例】表单focus和blur事件用法

input中有2个属性，一个是focus获取焦点，一个是blur失去焦点。获取焦点就是我们点击输入框时输入框被选中；失去焦点即点击输入框以外的区域，今天就用这两种属性做一个点击输入框的动画效果。

先写个输入框，代码如下：

<template>
	<view class="out">
		<input type="text" :value="iptvalue">
	</view>
</template>

<script setup>
import {ref} from "vue" ;
const iptvalue = ref("") ;
</script>

<style lang="scss" scoped>
	.out{
		 padding: 0 20px;
		 margin-top: 40px;
		 input{
			 border: 1px solid #ccc;
			 height: 40px;
		 }
	} 
	
</style>

效果如下：
在这里插入图片描述
接下来，把focus和blur属性加入进去，无论是focus还是blur都是会有一个value返回值的，等会我们看控制台，先放上代码：

<template>
	<view class="out">
		<input type="text" :value="iptvalue" @focus="onfocus" @blur="onblur">
	</view>
</template>

<script setup>
import {ref} from "vue" ;
const iptvalue = ref("") ;
function onfocus(e){
	console.log(e);
}
function onblur(e){
	console.log(e);
}
</script>

<style lang="scss" scoped>
	.out{
		 padding: 0 20px;
		 margin-top: 40px;
		 input{
			 border: 1px solid #ccc;
			 height: 40px;
		 }
	} 
	
</style>

注意看控制台，不管是focus还是blur，都会有返回值，这个返回值是可以用来作运算的，不过今天不会说到运算，只是根据返回值做一个点击输入框后的动画效果：
在这里插入图片描述
接下来，插入动画的小图片，并为其设置好CSS样式，代码如下：

<template>
	<view class="out">
		<input type="text" :value="iptvalue" @focus="onfocus" @blur="onblur">
		<image src="../../static/chicken.gif" class="pic"></image>
	</view>
</template>

<script setup>
import {ref} from "vue" ;
const iptvalue = ref("") ;
function onfocus(e){
	console.log(e);
}
function onblur(e){
	console.log(e);
}
</script>

<style lang="scss" scoped>
	.out{
		 padding: 0 20px;
		 margin-top: 40px;
		 position: relative;
		 input{
			 border: 1px solid #ccc;
			 height: 40px;
			 position: relative;
			 z-index: 2;
			 background: #fff;
		 }
		 .pic{
			 width: 24px;
			 height: 24px;
			 z-index: 1;
			 position: absolute;
			 top: -24px;
			 left: calc(50% - 12px);
		 }
	} 
	
</style>

效果如下：
在这里插入图片描述
加入逻辑部分，代码如下：

<template>
	<view class="out">
		<input type="text" :value="iptvalue" @focus="isActive = true" @blur="isActive = false">
		<image src="../../static/chicken.gif" class="pic"
		:class = "isActive?'active':''"></image>
	</view>
</template>

<script setup>
import {ref} from "vue" ;
const iptvalue = ref("") ;
const isActive = ref(false) ;
/*
function onfocus(e){
	isActive.value = true ;
}
function onblur(e){
	isActive.value = false ;
}
*/
</script>

<style lang="scss" scoped>
	.out{
		 padding: 0 20px;
		 margin-top: 40px;
		 position: relative;
		 input{
			 border: 1px solid #ccc;
			 height: 40px;
			 position: relative;
			 z-index: 2;
			 background: #fff;
		 }
		 .pic{
			 width: 24px;
			 height: 24px;
			 z-index: 1;
			 position: absolute;
			 top: 0px;
			 left: calc(50% - 12px);
			 transition: top 0.3s;
		 }
		 .pic.active{
			 top: -24px;
		 }
	} 
	
</style>

最终效果：
在这里插入图片描述