仿淘宝首页搜索栏，点击可直接查询

原创于 2018-08-10 15:04:20 发布 · 2.5k 阅读

CC 4.0 BY-SA版权

本文介绍了一个简单的HTML表单查询功能实现方式，包括使用HTML、CSS及JavaScript进行表单元素的布局、样式设置及交互逻辑编写。通过这些技术，可以实现在用户输入信息并提交表单后，自动跳转到指定页面进行查询的功能。

HTML

CSS

#message{font-size: 16px;color:#ccc;position: absolute;top:13px;left:72px;cursor: text;}

$(function(){
   function $(id){ return document.getElementById(id);}
   $("lsm").focus();//自动获取光标方法
   $("lsm").oninput = $("lsm").onpropertychange = function () {
   //oninput 大部分浏览器支持检测用户表单输入内容
   //onpropertychange ie678 检测用户表单输入内容
       if ( this.value == ""){
           // 首先判断文本框里的值是否为空。注意用双等号！
           $("message").style.display = "block";
           $("direct").style.display = "block";
       } else {
           $("message").style.display = "none";
           $("direct").style.display = "none";
       }
   }
});
function formSubmit()
{
   var val = $("#lsm").val();
   var moren = $("#message").html().trim();
   if(val == '')
   {
       $("#lsm").attr("value",moren);
       $("message").style.display = "none";
       //alert(val);
       $("cangpin_sel").submit();
   }
   else
   {
       $("cangpin_sel").submit();
   }
}