HTML 请输入关键字的搜索框，功能：输入时：框内的请输入关键字消失，鼠标移开时框内的请输入关键字又重现

风从北方来

于 2018-05-31 17:31:00 发布

阅读量1w

点赞数 2

CC 4.0 BY-SA版权

分类专栏： HTML Javascript CSS

本文链接：https://blog.youkuaiyun.com/beifangdefengchuilai/article/details/80527624

HTML 同时被 3 个专栏收录

22 篇文章

订阅专栏

Javascript

16 篇文章

订阅专栏

CSS

11 篇文章

订阅专栏

本文介绍了一种使用HTML和JavaScript实现的输入框焦点效果。当用户点击输入框时，预设的文字会消失以便用户输入；若用户离开输入框且未输入任何内容，则预设文字重新出现以提示用户。这是一种简单的交互设计，可以提高用户体验。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="width:600px;margin:0 auto;">
        <input id="i1" onfocus="Focus();" onblur="Blur();" type="text" value="请输入关键字">
        <input type="text" placeholder="请输入关键字">
    </div>
    <script>
        function Focus(){
            var tag=document.getElementById('i1');
            var val=tag.value;
            if(val=='请输入关键字'){
                tag.value='';
            }
        }
        function Blur(){
            var tag=document.getElementById('i1');
            var val=tag.value;
            if(val.length==0){
                tag.value='请输入关键字';
            }
        }
    </script>
</body>
</html>