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

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

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

HTML

<form id="cangpin_sel" style="position:relative;" action="select_pingji.php" method="get" name="formsearch" autocomplete="off" >
            <input id="lsm" type="text"  name="collection_number" value="" />
            <label for="lsm" id="message">021401705350</label>
            <input id="select_sub" type="submit" value="点击查询" onclick="formSubmit()" />
        </form>

CSS

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

js

$(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();
    }
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值