扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
本文实例讲述了jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能。分享给大家供大家参考，具体如下：
成都创新互联专业为企业提供剑河网站建设、剑河做网站、剑河网站设计、剑河网站制作等企业网站建设、网页设计与制作、剑河企业网站模板建站服务，10年剑河做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。
最近都成为页面仔了，主要工作都放在了前段，以前总是写后台程序，对前端的一些技术 html,css,javascript ,虽然都懂一些，但要做出比较好看页面，还是有很大的差距的。最近就遇到了这样一个要求不是很高，但有点小清新风格的登录或注册页面，要求如下：
1. 在输入框中 如果没有内容，则显示提示：比如"请输入用户名"
2. 如果输入框获得焦点，则隐藏提示
3. 如果输入框失去焦点，并且输入框没有内容，则显示提示，如果有内容，则隐藏提示。
4. 采用 Jquery 1.7.2
在搜索了资料之后，发现通过label, input 并结合javascript 结合来实现，因为 label 有一个 for 属性，并指向input 的id ,这样，只要点击 label ,input 输入框就能获取焦点.一旦获取焦点就响应Javascript事件。隐藏label. 同样在失去焦点的时候，也触发事件，判断输入框是否有内容，来确定是否显示提示。整个效果如下：
获取焦点后
代码如下:
www.jb51.net jQuery input焦点与提示文字
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具 http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery form操作技巧汇总》、《jQuery操作json数据技巧汇总》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》、《jQuery表格(table)操作技巧汇总》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网