京东获取焦点，模仿京东做出搜素

最新推荐文章于 2023-11-06 10:46:52 发布

江山如画嘉文

最新推荐文章于 2023-11-06 10:46:52 发布

阅读量142

点赞数 1

本文链接：https://blog.csdn.net/qq_41214660/article/details/80800532

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
        <style>
            input{
                width: 300px;
                height: 36px;
                padding-left: 5px;
                color: #eee;
            }
            label{
                position: absolute;
                top: 85px;
                left: 62px;
                font-size: 12px;
                cursor: text;
                color: #eee;
            }
        </style>
</head>
<body>
京东：<input id="inp1" type="text" value="我是京东"><br><br>

<script>
//需求京东的获取焦点
// 京东的input按钮获取了插入光条立刻删除内容，失去插入条光标显示文字
    var inp1=document.getElementById("inp1");
    //获取焦点
    inp1.οnfοcus=function () {
        //判断，如果input里面的内容是“我是京东”，那么把值赋值为“”
        if(this.value==="我是京东"){
        this.value="";
        this.style.color="#000";
         }
    }
    inp1.οnblur=function () {
        if(this.value===""){
            this.value="我是京东";
            this.style.color="#EEE";
        }
    }
   



</script>
</body>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

江山如画嘉文

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
京东获取焦点，模仿京东做出搜素

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; input{
复制链接

扫一扫