加入收藏 | 设为首页 | 会员中心 | 信息反馈 | RSS

栏目导航 | Dreamweaver | FrontPage | Golive | Flash | JavaScript | CSS | web | HTML |
☞ 您当前的位置:首页 > 学院 > 网页制作 > HTML 发表评论 加入收藏夹 错误报告

input输入框默认提示文字,鼠标点击消失实现代码

时间:2015-08-21  来源:网络  作者:不详  点击:    打印本文打印本文  发表文章发表文章

[input输入框默认提示文字,鼠标点击消失实现代码]由[中国文秘资源网(www.zgdoc.com)]小编精心整理,供您参考!如您需要更多相关的文章资料,请点击进入[HTML]栏目查阅,或从网页右侧的搜索框输入关键词搜索,会有更多更精彩的发现!另外,本文内容来源于[网络],作者[不详],转载要记得注明哦!^_^

☞ 此外本栏目编辑还推荐您阅读: 国文秘资网 - 您身边免费贴心的秘专家 - 欢迎访问WwW.ZgDoC.CoM

今天想做一个输入框有默认文字,鼠标点击消失的效果,经过查询,发现2种实现方式:

1.

<input type="text" value="请输入用户名" onfocus="if(value=='请输入用户名') {value=''}" onblur="if (value=='') {value='请输入用户名'}">

直接在input中定义onfocus和onblur事件,缺点:鼠标一离开就显示提示文字,输入框中用户的输入也会消失。

2.提示文字根据焦点自动消失的输入框javascript

 2的功能较1来说较全面,代码也稍复杂一点,功能包括:

鼠标点击输入框,输入框获得焦点时,提示文字自动消失
鼠标焦点离开输入框,提示文字根据情况显示
输入框html代码

<input id="searchKey" type="text" name="q" value="" tips="请输入关键字"/><br />

<script language="javascript" type="text/javascript"> window.onload = function(){ varo=document.getElementByIdx_x("searchKey"); o.setAttribute("valueCache",o.value); o.onblur =function(){ if(o.value=="") { o.valueCache=""; o.value=o.tips; } else o.valueCache=o.value; } o.onfocus = function(){ o.value=o.valueCache; //光标始终在文字最后 var e = event.srcElement;var r =e.createTextRange(); r.moveStart('character',e.value.length); r.collapse(true); r.select(); } o.onblur(); }
<script>

国文秘资网 - 您身边免费贴心的秘专家 - 欢迎访问WwW.ZgDoC.CoM
感谢您关注中国文秘资源网_文秘中国_m.zgdoc.com

来顶一下
近回首页
返回首页
 上一篇:怎么取消微信浏览器缓存? 下一篇:返回列表
评论列表共有 0 条评论
发表评论 共有 条评论
用 户 名:   密码:    匿名发表   还没有注册?
评论表情:
  验证码:
站内搜索
推荐阅读
搜索引擎营销推广技巧
搜索引擎营销推广技巧
2015年全国各地高考志愿填报时间及方式汇总
2015年全国各地高考志
2015愚人节整蛊手册
2015愚人节整蛊手册
2015年全国两会热点解读
2015年全国两会热点解
相关文章
    无相关信息
栏目更新
栏目热门
秘书在线