首页 > web前端 > js教程 > 正文

用jquery实现输入框获取焦点消失文字_jquery

php中文网
发布: 2016-05-16 17:35:12
原创
1392人浏览过

我们在登录网站的时候,文本框中经常会有提示你输入的信息,当你点击文本框,提示信息自动消失,当文本框什么都没有,而且失去焦点的时候,又有了提示文字。

1.原型开发,先做一个简单的:
我们首先需要一个html文件:

MCP市场
MCP市场

中文MCP工具聚合与分发平台

MCP市场 211
查看详情 MCP市场
复制代码 代码如下:



input test







User Name:

PassWord:






下面加入jquery代码:
我使用了click 和blur内置事件类型处理,而且,只是对username框有效(因为密码框还有别的因素考虑)
复制代码 代码如下:



input test








User Name:

PassWord:






2.做的更好
这样基本的原型就写成了,但是这个原型有许多的不足:
1.也许可以对密码框也使用这种方式,但是密码框的type类型是password,它不能显示,何来提示文字?
2. if($(this).val()=="")这种写法我可以接受,但是 if($(this).val()=="Enter your name"),你不觉得这很...要是我就想输这个呢...
3.提示文字用别的灰色的粗体表示,这样交互性是不是更强?
4.既然想要用两种字体表示,能不能把他们提取出来?写在.css里?这个是可以重用的啊!

解决办法:
1.密码框先让它的type是text的,等到点击了,我们再设置成password
2.用个变量来表示是否要切换吧。
3.设置不同的css.
4.用attr("class","class1"),attr("class","class2")来切换class,而不是引用id.(也就是说用.不用#)
下面是实现:
复制代码 代码如下:



input test







User Name:

PassWord:






3.更多:
把css写到外部文件.
DRY原则!用插件来实现.
我在下一篇博客去实现.
author: aiqier
最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号