js练习题：搜索框内容

最新推荐文章于 2024-03-29 16:34:35 发布

诗意孤舟

最新推荐文章于 2024-03-29 16:34:35 发布

阅读量71

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_52384509/article/details/124027435

版权

JavaScript 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

##js练习题：搜索框内容

<!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>Document</title>
 </head>
 <body>
     <style>
         input{
             width: 300px;
             margin: 300px;
             height: 30px;
             padding-left: 3px;
             box-sizing: border-box;
             outline: none;
             outline-offset: 0;
             outline-style: none;
             border: 1px soldi #f40;
             color: #666;
         }
         input::placeholder{
             content: "";
             color: #f40;
         }
     </style>
     <input type="text" id="text" placeholder="搜索内容">
     <script>
         var search = document.getElementById('text');
         search.onfocus = function(){
             if(this.placeholder == '搜索内容'){
                 this.placeholder = '';
             }
         }
         search.onblur = function(){
             if(this.placeholder == ''){
                 this.placeholder = '搜索内容';
             }
         }
     </script>
 </body>
 </html>

诗意孤舟

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js练习题：搜索框内容

##js练习题：搜索框内容<!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">
复制链接

扫一扫

专栏目录