jQuery实现输入输入框获得焦点和失去焦点时提示消失显示功能示例

本文通过一个实例讲述了jQuery在输入输入框获得焦点和失去焦点时，实现了消失和显示提示的功能。分享给大家参考，如下：

最近，他们成了小跟班，主要工作放在了前台。他们过去常常编写后台程序。虽然他们都知道HTML、CSS、JavaScript等一些前端技术，但是要做出更好看的页面还有很大的差距。最近遇到这样一个登录或者注册页面，要求不是很高，但是有一点清新的风格。所需经费如下：

1.如果输入框中没有内容，则会显示提示：例如‘请输入用户名’；2.如果输入框获得焦点，它将被隐藏；3.如果输入框失去焦点，没有内容，就会显示出来；如果有内容，就会被隐藏。4.使用Jquery 1.7.2

搜索数据后发现是通过label、input和javascript相结合的方式实现的，因为label有一个for属性，指向input的id，所以只要点击label，输入框就可以获得焦点，一旦获得焦点，就会响应Javascript事件。隐藏标签。另外，当失去焦点时，触发一个事件来判断输入框中是否有内容，以确定是否显示提示。整体效果如下：

获得焦点后，

代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www . w3 . org/TR/XHTML 1/DTD/XHTML 1-Transitional . DTD ' html xmlns=' http://www . w3 . org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/title www.jb51.net jquery输入焦点和提示文本/title script src=' http :http://libs.baidu.com/jquery/2.0.0/jquery.min.js'/script script type=' text/JavaScript ' $(文档)。ready(function(){ $('#loginform。input _ txt’)。每个(函数(){ var thisVal=$(this))。val()；//判断文本框的值是否为空，有值则隐藏提示，有值则显示if(thisVal！=''){ $(这个)。兄弟姐妹('标签')。hide()；}else{ $(this)。兄弟姐妹('标签')。show()；}//焦点输入框验证$(这个)。focus (function () {$ (this))。兄弟姐妹('标签')。hide()；}).模糊(function(){ var val=$(this))。val()；如果(瓦尔！=''){ $(这个)。兄弟姐妹('标签')。hide()；}else{ $(this)。兄弟姐妹('标签')。show()；} });})})/script style type=' text/CSS ' form { width :400 px；margin:10px汽车；border:solid 1px # E0fEDE背景# FCF9EFpadding:30pxbox-shadow:0 1px 10px rgba(0，0，0，0.1)插图；} span { display:block高度：40 px；位置：相对；余量：20 px 0；}标签{ position:absolutefloat:left线高：40 px；left:10pxcolor: # BCBCBCcursor:text}.input _ txt { width:398pxborder:solid 1px # cccbox-shadow:0 1px 10px rgba(0，0，0，0.1)插图；高度：38 px；text-indent :10 px；}.input _ txt : focus { box-shadow :0 0 4px rgba(255，153，164，0.8)；border:solid 1px # B00000}.border _ radius { border-radius :5 px；color: # B00000}/style/head dyform class=' border _ radius ' id=' log in '当www.jb51.net获得焦点时提示消失span标签为='username '请输入账号/Label输入类型=' text ' class=' input _ txt border _ radius ' id=' username '/span标签为=' password '密码/Label输入类型=' text ' class=' input _ txt border _ radius ' id=' password '/span/form/body/HTML感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具http://tools.jb51.net/code/HtmlJsRun来测试该工具

更多对jQuery感兴趣的读者，请查看本站话题：《jQuery form操作技巧汇总》、《jQuery操作json数据技巧汇总》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》、《jQuery表格(table)操作技巧汇总》、《jquery选择器用法总结》、0103010。

希望本文对大家的jQuery程序设计有所帮助。