input 输入框在获取焦点与失去焦点时提示的消失与显示
By:Roy.LiuLast updated:2012-10-11
最近都成为页面仔了,主要工作都放在了前段,以前总是写后台程序,对前端的一些技术 html,css,javascript ,虽然都懂一些,但要做出比较好看页面,还是有很大的差距的。最近就遇到了这样一个要求不是很高,但有点小清新风格的登录或注册页面,要求如下:
1. 在输入框中 如果没有内容,则显示提示:比如"请输入用户名"
2. 如果输入框获得焦点,则隐藏提示
3. 如果输入框失去焦点,并且输入框没有内容,则显示提示,如果有内容,则隐藏提示。
4. 采用 Jquery 1.7.2
在搜索了资料之后,发现通过label, input 并结合javascript 结合来实现,因为 label 有一个 for 属性,并指向input 的id ,这样,只要点击 label ,input 输入框就能获取焦点.一旦获取焦点就响应Javascript事件。隐藏label. 同样在失去焦点的时候,也触发事件,判断输入框是否有内容,来确定是否显示提示。整个效果如下:
获取焦点后
代码如下:
1. 在输入框中 如果没有内容,则显示提示:比如"请输入用户名"
2. 如果输入框获得焦点,则隐藏提示
3. 如果输入框失去焦点,并且输入框没有内容,则显示提示,如果有内容,则隐藏提示。
4. 采用 Jquery 1.7.2
在搜索了资料之后,发现通过label, input 并结合javascript 结合来实现,因为 label 有一个 for 属性,并指向input 的id ,这样,只要点击 label ,input 输入框就能获取焦点.一旦获取焦点就响应Javascript事件。隐藏label. 同样在失去焦点的时候,也触发事件,判断输入框是否有内容,来确定是否显示提示。整个效果如下:
获取焦点后
代码如下:
www.yihaomen.com
From:一号门
Previous:前端设计:jquery操作select 方法大全
Next:网站换空间了,凤凰烈磐,浴火重生。
COMMENTS