• (转载)搜索框代码


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style type="text/css">
    <!--
    .search{
    padding-right:10px;
    padding-left:10px;
    padding-top:5px;
    padding-bottom:5px;
    280px;
    background:#1A93CC;
    float:left;
    position:relative;
    }
    .search .input{
    padding-top:2px;
    height:16px;
    180px;
    border: 1px solid #0086C6;
    font-size:14px;
    background:#fff url(http://www.funshion.com/img/search_btn.gif) no-repeat right 0;
    }
    .search .btn{
    }

    .label{color:#ccc;position:absolute;left:12px;top:6px;display:block;height:22px;line-height:22px;font-size:12px;}
    span.submit{cursor:pointer;position:absolute;left:171px;top:6px;20px;height:20px;text-indent:-999em;}
    -->
    </style>
    </head>
    <body>
    <div class="search">
    <form action="{sys:plusurl}search/index.asp" method="post" name="frmsearch" id="frmsearch">
    <input name="keyword" type="text" class="input" id="keyword" value="" style="float:left;" />
    <label for="keyword" id="for-keyword" class="label">站内搜索</label>
    <span class="submit" onclick="return formSubmit('frmsearch');">搜索</span>
    </form>
    </div>
    <script type="text/javascript">
    var $ = function(id){return document.getElementById(id);}
    var formSubmit = function(id){
    document.forms[id].submit();
    return false;
    }
    var tip = function(q, for_q){
    q = $(q);
    for_q = $(for_q);
    q.onfocus = function(){
    for_q.style.display = 'none';
    q.style.backgroundPosition = "right -17px";
    }
    q.onblur = function(){
    if(!this.value) for_q.style.display = 'block';
    q.style.backgroundPosition = "right 0";
    }
    for_q.onclick = function(){
    this.style.display = 'none';
    q.focus();
    }
    };
    tip('keyword','for-keyword');
    </script>
    </body>
    </html>

  • 相关阅读:
    【Win 10 应用开发】Toast通知激活应用——前台&后台
    MySQL深入理解
    mysql 索引中的USING BTREE 的意义
    关于PHP将对象数据写入日志的问题
    Golang学习笔记
    git flow 使用步骤
    git flow常用命令
    Nginx Log日志统计分析常用命令
    Nginx配置中的log_format用法梳理(设置详细的日志格式)
    回调函数的原理及PHP实例
  • 原文地址:https://www.cnblogs.com/annabook/p/3622606.html
Copyright © 2020-2023  润新知