关于input的监听聚焦事件

最新推荐文章于 2024-01-26 20:24:09 发布

weixin_30361753

最新推荐文章于 2024-01-26 20:24:09 发布

阅读量2.9k

点赞数 1

文章标签： java javascript ViewUI

原文链接：http://www.cnblogs.com/Arunoido/p/10463792.html

版权

今天是打算开始实战自己一直要写的网站，然后开始疯狂的翻网站找灵感，在路过阿里云的时候，突然发现——欸？这个输入框的效果看着可以欸，于是乎，电源一拔坐了起来，分析效果。

其实这个效果并不难理解：

　　1. 当鼠标指向的时候，文本框会拉长；

　　2. 当鼠标移开的时候，文本框会恢复原来长度；

　　3. 当点击输入框后，光标在输入框中聚焦后，鼠标再移开，它会保持拉长后的长度；

　　4. 当失去聚焦的时候，文本框长度再次缩短；

一分析完，就开始埋头劈里啪啦的一阵猛敲：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人比较喜欢用18号字, Fira Code, 行距 1.02 看着特舒服</title>
</head>

<style>

.search{
    
    width: 10rem;　　/* 初始宽度 */
    font-size: 1.1rem;　　
    color: ghostwhite;
    padding: 0.411rem 1rem;　　/* 为了让输入框文本在中心(当时写的时候没有注意到这点，直接设置的高度，导致输入聚焦有点偏了...) */
    background-color: #0001;
    border: 1px solid #7b4aff;

    -webkit-border-radius: 0.2rem;　　/* 圆角 */
    -moz-border-radius: 0.2rem;
    border-radius: 0.2rem;
    -webkit-transition: 1.2s cubic-bezier(0.46, 0.26, 0.22, 0.76);　　/* 变换动画1.2s 速度使用贝塞尔曲线 */
    -moz-transition: 1.2s cubic-bezier(0.46, 0.26, 0.22, 0.76);
    -ms-transition: 1.2s cubic-bezier(0.46, 0.26, 0.22, 0.76);
    -o-transition: 1.2s cubic-bezier(0.46, 0.26, 0.22, 0.76);
    transition: 1.2s cubic-bezier(0.46, 0.26, 0.22, 0.76);　　
}

.search:hover{　　
    width: 22rem;　　/* 光标经过拉长 */
    border: 1px solid #7b4aff;
    background-color: rgba(18, 18, 39, 0.4);
    -webkit-border-radius: 0.2rem;
    -moz-border-radius: 0.2rem;
    border-radius: 0.2rem;
}

</style>

 <body>

 <header>

 　　<div class="topBar"> 

　　　　<input class="search" type="text" value=""/>

<

最低0.47元/天解锁文章

weixin_30361753

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
关于input的监听聚焦事件

今天是打算开始实战自己一直要写的网站，然后开始疯狂的翻网站找灵感，在路过阿里云的时候，突然发现——欸？这个输入框的效果看着可以欸，于是乎，电源一拔坐了起来，分析效果。其实这个效果并不难理解：　　1. 当鼠标指向的时候，文本框会拉长；　　2. 当鼠标移开的时候，文本框会恢复原来长度；　　3. 当点击输入框后，光标在输入框中聚焦后，鼠标再移开，它会保持拉长后的长度；　　4....
复制链接

扫一扫