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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值