HTML搜索框中加入提示文字,HTML 5 <input> placeholder 属性 实现搜索框提示文字点击输入后消失 - 尚码园...

H5以前要实现这个功能还要用到JS,H5出来以后新增长了placeholder属性,有了这个属性就就能轻松实现这个功能。post

定义和用法

placeholder 属性提供可描述输入字段预期值的提示信息(hint)。this

该提示会在输入字段为空时显示,并会在字段得到焦点时消失。url

注释:placeholder 属性适用于如下的 类型:text, search, url, telephone, email 以及 password。(此处来自W3cSchool)3d

以上是H5实现的代码。orm

οnkeydοwn="if (event.keyCode==13) {}" οnblur="if(this.value=='')value='请输入您要搜索的关键字';"

οnfοcus="if(this.value=='请输入您要搜索的关键字')value='';" />

以上是H5以前的实现方式blog

94b3dd5fa67e800c04a1b0f1d6b49e0c.png输入前的效果input

4ae7e7ecfe4620d8a562bb8f795cfc89.png输入后的效果it

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
<html> <head> <meta charset="utf-8" /> <title>星星国际影城</title> <link href="css/index.css" rel="stylesheet" type="text/css" /> <script src="js/main.js" type="text/javascript"></script> </head> <body> <!--顶部--> <div id="header"> <div class="main"> <div class="info"> <a href=" " class="sina" title="sina" alt="新浪"></a > <a href="#" class="tqq" title="tqq" alt="tqq"></a > <a href="login.html" target="_blank">登录|</a > <a href="sign.html" target="_blank">注册|</a > <span>全国服务热线:888-8888888</span> </div> </div> </div> <!--logo部分--> <div id="logo"> <div class="logo_star"> <a href="index.html">< img src="images/logo.jpg" title="" alt="logo" /></a > </div> </div> <!--导航--> <div id="nav"> <div class="menu"> <!--导航菜单--> <ul> <li><a href="#" class="active">首页</a ></li> <li><a href="#">影片</a ></li> <li><a href="#">影城</a ></li> <li><a href="#">购票</a ></li> <li><a href="#">影城活动</a ></li> <li><a href="#">会员服务</a ></li> <li><a href="#">顾客互动</a ></li> </ul> <!--搜索框--> <div class="search"> <input type="text" placeholder="搜索影片" name="search"/> <input type="button" name="btn" value="" /> </div> </div> </div> <!--主体部分--> <div id="main"> <!--banner轮播图--> <div class="banner"> <ul class="main_content"> <li>< img src="images/b1.png" /></li> <li>< img src="images/b2.png" /></li> <li>< img src="images/b3.png" /></li> </ul> <!--轮播切换--> <ul class="tab"> <li></li> <li></li> <li></li> </ul> </div> <!--快速购票--> 在每行代码进行解释
06-02

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值