jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例


Posted in jQuery onMay 27, 2019

本文实例讲述了jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能。分享给大家供大家参考,具体如下:

最近都成为页面仔了,主要工作都放在了前段,以前总是写后台程序,对前端的一些技术 html,css,javascript ,虽然都懂一些,但要做出比较好看页面,还是有很大的差距的。最近就遇到了这样一个要求不是很高,但有点小清新风格的登录或注册页面,要求如下:

1. 在输入框中 如果没有内容,则显示提示:比如"请输入用户名"
2. 如果输入框获得焦点,则隐藏提示
3. 如果输入框失去焦点,并且输入框没有内容,则显示提示,如果有内容,则隐藏提示。
4. 采用 Jquery 1.7.2

在搜索了资料之后,发现通过label, input 并结合javascript 结合来实现,因为 label 有一个 for 属性,并指向input 的id ,这样,只要点击 label ,input 输入框就能获取焦点.一旦获取焦点就响应Javascript事件。隐藏label. 同样在失去焦点的时候,也触发事件,判断输入框是否有内容,来确定是否显示提示。整个效果如下:

jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例

获取焦点后

jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例

代码如下:

<!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>3water.com 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();
   }).blur(function(){
    var val=$(this).val();
    if(val!=""){
     $(this).siblings("label").hide();
    }else{
     $(this).siblings("label").show();
    }
   });
  })
 })
</script>
<style type="text/css">
form{width:400px;margin:10px auto;border:solid 1px #E0fEDE;background:#FCF9EF;padding:30px;box-shadow:0 1px 10px rgba(0,0,0,0.1) inset;}
span{display:block;height:40px;position:relative;margin:20px 0;}
label{position:absolute;float:left;line-height:40px;left:10px;color:#BCBCBC;cursor:text;}
.input_txt{width:398px;border:solid 1px #ccc;box-shadow:0 1px 10px rgba(0,0,0,0.1) inset;height:38px;text-indent:10px;}
.input_txt:focus{box-shadow:0 0 4px rgba(255,153,164,0.8);border:solid 1px #B00000;}
.border_radius{border-radius:5px;color:#B00000;}
</style>
</head>
<body>
<form class="border_radius" id="loginform">
    3water.com得到焦点时提示语消失
    <span>
       <label for="username">请输入账号</label>
       <input type="text" class="input_txt border_radius" id="username" />
    </span>
    <span>
       <label for="password">密码</label>
       <input type="text" class="input_txt border_radius" id="password" />
    </span>
</form>
</body>
</html>

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具 http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

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

jQuery 相关文章推荐
详谈jQuery.load()和Jsp的include的区别
Apr 12 jQuery
jquery submit()不能提交表单的解决方法
Apr 24 jQuery
jQuery实现点击关注和取消功能
Jul 03 jQuery
jQuery实现的简单动态添加、删除表格功能示例
Sep 21 jQuery
jQuery响应滚动条事件功能示例
Oct 14 jQuery
jQuery实现页码跳转式动态数据分页
Dec 31 jQuery
jQuery实现的简单图片轮播效果完整示例
Feb 08 jQuery
jQuery滚动条美化插件nicescroll简单用法示例
Apr 18 jQuery
jQuery插件实现的日历功能示例【附源码下载】
Sep 07 jQuery
jquery实现简易验证插件封装
Sep 13 jQuery
jQuery实现鼠标拖拽登录框移动效果
Sep 13 jQuery
jQuery实现购物车全功能
Jan 11 jQuery
jquery实现动态创建form并提交的方法示例
May 27 #jQuery
jquery实现动态改变css样式的方法分析
May 27 #jQuery
通过jQuery学习js类型判断的技巧
May 27 #jQuery
jQuery中使用validate插件校验表单功能
May 24 #jQuery
jQuery操作attr、prop、val()/text()/html()、class属性
May 23 #jQuery
jquery+php后台实现省市区联动功能示例
May 23 #jQuery
jQuery Migrate 插件用法实例详解
May 22 #jQuery
You might like
改写ThinkPHP的U方法使其路由下分页正常
2014/07/02 PHP
分享php分页的功能模块
2015/06/16 PHP
PHP 7的一些引人注目的新特性简单介绍
2015/11/08 PHP
Yii框架Session与Cookie使用方法示例
2019/10/14 PHP
laravel框架数据库操作、查询构建器、Eloquent ORM操作实例分析
2019/12/20 PHP
javascript 变量作用域 代码分析
2009/06/26 Javascript
Javascript实现返回上一页面并刷新的小例子
2013/12/11 Javascript
关闭页面window.location事件未执行的原因及解决方法
2014/09/01 Javascript
JavaScript判断字符长度、数字、Email、电话等常用判断函数分享
2015/04/01 Javascript
javascript中this的四种用法
2015/05/11 Javascript
JS实现在状态栏显示打字效果完整实例
2015/11/02 Javascript
Extjs4.0 ComboBox如何实现三级联动
2016/05/11 Javascript
javascript函数的四种调用模式
2017/01/08 Javascript
BootStrap 动态表单效果
2017/06/02 Javascript
JavaScript实现离开页面前提示功能【附jQuery实现方法】
2017/09/26 jQuery
jQuery实现动态显示select下拉列表数据的方法
2018/02/05 jQuery
vue-router项目实战总结篇
2018/02/11 Javascript
JavaScript中join()、splice()、slice()和split()函数用法示例
2018/08/24 Javascript
angular5 子组件监听父组件传入值的变化方法
2018/09/30 Javascript
vue中过滤器filter的讲解
2019/01/21 Javascript
详解JavaScript的this指向和绑定
2020/09/08 Javascript
python 动态获取当前运行的类名和函数名的方法
2014/04/15 Python
浅谈Python中的全局锁(GIL)问题
2019/01/11 Python
Python Django 页面上展示固定的页码数实现代码
2019/08/21 Python
Pycharm创建文件时自动生成文件头注释(自定义设置作者日期)
2020/11/24 Python
Canvas获取视频第一帧缩略图的实现
2020/11/11 HTML / CSS
美国精品家居用品网站:US-Mattress
2016/08/24 全球购物
简单说说tomcat的配置
2013/05/28 面试题
农田水利实习自我鉴定
2013/09/19 职场文书
商务日语毕业生自荐信范文
2013/11/14 职场文书
管道维修工岗位职责
2013/12/27 职场文书
英语老师推荐信
2014/02/26 职场文书
活动总结范文
2014/08/30 职场文书
企业反腐倡廉心得体会
2015/08/15 职场文书
2019职场实习报告该怎么写?
2019/07/01 职场文书
Django利用AJAX技术实现博文实时搜索
2021/05/06 Python