jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
版权申诉
5星 · 超过95%的资源 125 浏览量
2020-12-04
14:17:39
上传
评论
收藏 67KB PDF 举报 
jQuery实现实现input输入框获取焦点与失去焦点时提示的消失与输入框获取焦点与失去焦点时提示的消失与
显示功能示例显示功能示例
本文实例讲述了jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能。分享给大家供大家参考，具体如下：
最近都成为页面仔了，主要工作都放在了前段，以前总是写后台程序，对前端的一些技术 html,css,javascript ,虽然都懂一些，
但要做出比较好看页面，还是有很大的差距的。最近就遇到了这样一个要求不是很高，但有点小清新风格的登录或注册页面，
要求如下：
1. 在输入框中 如果没有内容，则显示提示：比如”请输入用户名”
2. 如果输入框获得焦点，则隐藏提示
3. 如果输入框失去焦点，并且输入框没有内容，则显示提示，如果有内容，则隐藏提示。
4. 采用 Jquery 1.7.2
在搜索了资料之后，发现通过label, input 并结合javascript 结合来实现，因为 label 有一个 for 属性，并指向input 的id ,这样，
只要点击 label ,input 输入框就能获取焦点.一旦获取焦点就响应Javascript事件。隐藏label. 同样在失去焦点的时候，也触发事
件，判断输入框是否有内容，来确定是否显示提示。整个效果如下：
获取焦点后
代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.jb51.net jQuery input焦点与提示文字</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#loginform .input_txt").each(function(){
var thisVal=$(this).val();
//判断文本框的值是否为空，有值的情况就隐藏提示语，没有值就显示
if(thisVal!=""){
$(this).siblings("label").hide();
}else{
$(this).siblings("label").show();
}
//聚焦型输入框验证
$(this).focus(function(){
$(this).siblings("label").hide();
评论10