模拟placeholder效果

最新推荐文章于 2024-04-19 10:39:48 发布

原创最新推荐文章于 2024-04-19 10:39:48 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

javascript 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了一种使用JavaScript来模拟HTML输入框placeholder效果的方法，通过改变输入框的样式和内容实现用户体验的提升。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

因为要修改默认placeholder的样式比较困难，用js模拟placeholder的效果

<!DOCTYPE HTML>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <title>模拟placeholder</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
        *{margin: 0;padding: 0}
        div#main{
            width:300px;
            text-align: center;
        }
        .red{
            color:red;
        }
   </style>
</head>

<body>
    <input type="text" class="form-control red" value="请输入电话">
    <script>
        $(function(){
            $('input').focus(function(){
                if($(this).val()=='请输入电话'){
                    $(this).toggleClass('red');
                    $(this).val('');
                }
            });
            $('input').blur(function(){
                if($(this).val().trim()==''){
                    $(this).toggleClass('red');
                    $(this).val('请输入电话');
                }
            });
        });
        
    </script>
</body>

</html>