js实现58同城搜索框（鼠标聚焦/移除）

最新推荐文章于 2022-06-13 12:53:36 发布

vernin

最新推荐文章于 2022-06-13 12:53:36 发布

阅读量265

点赞数 1

分类专栏： javascript 文章标签： js jquery javascript

本文链接：https://blog.csdn.net/weixin_48165407/article/details/115951530

版权

javascript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

效果图

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>58同城搜索框</title>
    <style>

        input{
            width: 380px;
            height: 50px;
            font-size: 24px;
            border: 1px solid red;
            outline: none;
            color: #999;
            padding: 0px;
            padding-left: 30px;
            vertical-align:middle;
            border-radius: 10px 0px 0px 10px;
        }
        .reach{
            color: #fff;
            width: 60px;
            height: 52px;
            background-color: red;
            padding: 0;
            margin-left: -10px;
            cursor: pointer;
            border-radius: 0px 10px 10px 0px;
        }
        div{
            width: 500px;
            height: 60px;
            margin: 50px auto;
        }
    </style>

    <script src="../jQuery.js"></script>
</head>
<body>
    <div>
        <input type="text" value="找工作上58">
        <input class="reach" type="submit" value="搜索"> 
    </div>
    
    <script>
        
        //方法一：原生js方法实现
        function yuanshengjs() {
        	//获取元素
            var input = document.getElementsByTagName('input')[0];
            //当鼠标聚焦时
            input.onfocus = function() {
            	//如果鼠标聚焦时value等于“找工作上58”，那么alue为空，字体颜色变黑
                if(this.value == "找工作上58"){
                    this.value = "";
                    this.style.color = "#000";
                }
            }
            //鼠标离开时
            input.onblur = function() {
            	//如果鼠标离开时value的值为空，那么value等于“找工作上58”，字体颜色变会
                if(this.value == ""){
                    this.value = "找工作上58";
                    this.style.color = "#999";
                }
            }
        }
       
       //方法二：jQuery实现
       $("input:first").focus(function(){
            if($(this).val() == "找工作上58"){
                $(this).val("");
                $(this).css("color","#000");
            }
        })
        $("input:first").blur(function(){
            if($(this).val() == ""){
                $(this).val("找工作上58").css("color","#999");
            }
        })
    </script>
</body>
</html>

vernin

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js实现58同城搜索框（鼠标聚焦/移除）

效果图代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <titl
复制链接

扫一扫