使用CSS和javascript 建立的html搜索引擎页面框架

用HTML5与CSS3建立一个搜索框

在这个新教程中，我将会讲解如何通过使用CSS3和HTML5的placeholder 属性来制作一个很酷的，并带有阴影效果，圆角矩形以及获得焦点文本内容就自动清空的包含一个搜索栏的表单（也就是Form）。

首先我们来看看完成的效果图

表单的结构说明图

表单的HTML代码

<form id=“searchbox”>
    <input value=“在这里输入查询内容” class=“placeholder” id=“search” placeholder=“在这里输入查询内容” type=“text”>
    <input id=“submit” value=“点击查询” type=“submit”>
 </form>

 

HTML placeholder 属性

相信你也注意到这个input 对象中包含一个特殊的属性placeholder,placeholder是HTML5新增的另一个属性，当input或者textarea设置了该属性 后，该值的内容将作为灰字提示显示在文本框中，当文本框获得焦点时，提示文字消失。以前要实现这效果都是用JavaScript来控制才能实现。

目前支持的浏览器如下：

• Firefox 3.7+
• Safari 4.0+
• Chrome 4.0+
• Opera 11+

如果我的浏览器不支持CSS3和HTML5呢？

不用担心，我在这个demo里也为不支持HTML5和CSS3的浏览器编写了相应的CSS和js来处理，网络上也有很多脚本来检查客户端的浏览器是否支持HTML5，在这里我使用了Modernizr脚本库来检查是否支持，虽然可以通过很多更少的代码来检查，但是通过Modernizr这个库可以帮你处理更多HTML5兼容的问题。

#search.placeholder {
   color: #9c9c9c !important;
   font-style: italic;
}

 

$(document).ready(function() {
        if (!Modernizr.input.placeholder)
        {
                var placeholderText = $(‘#search’).attr(‘placeholder’);

                $(‘#search’).attr(‘value’,placeholderText);
                $(‘#search’).addClass(‘placeholder’);

                $(‘#search’).focus(function() {
                        if( ($(‘#search’).val() == placeholderText) )
                        {
                                $(‘#search’).attr(‘value’,”);
                                $(‘#search’).removeClass(‘placeholder’);
                        }
                });

                $(‘#search’).blur(function() {
                        if ( ($(‘#search’).val() == placeholderText) || (($(‘#search’).val() == ”)) )
                        {
                                $(‘#search’).addClass(‘placeholder’);
                                $(‘#search’).attr(‘value’,placeholderText);
                        }
                });
        }
});

我们可以看到就是浏览器不支持HTML5和CSS3，我们的搜索表单也同样保持着优雅的外观。