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中fade(),show()起始位置的一点小发现
Apr 25 jQuery
jQuery简单绑定单个事件的方法示例
Jun 10 jQuery
JQuery 选择器、DOM节点操作练习实例
Sep 28 jQuery
jQuery实现所有验证通过方可提交的表单验证
Nov 21 jQuery
jQuery中库的引用方法
Jan 06 jQuery
jquery写出PC端轮播图实例
Jan 26 jQuery
jQuery实现基本隐藏与显示效果的方法详解
Sep 05 jQuery
jQuery访问json文件中数据的方法示例
Jan 28 jQuery
jquery中为什么能用$操作
Jun 18 jQuery
使用JQuery自动完成插件Auto Complete详解
Jun 18 jQuery
jQuery Ajax async=&gt;false异步改为同步时,解决导致浏览器假死的问题
Jul 22 jQuery
jQuery实现轮播图效果demo
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
PHP面向接口编程 耦合设计模式 简单范例
2011/03/23 PHP
php车辆违章查询数据示例
2016/10/14 PHP
PHP给源代码加密的几种方法汇总(推荐)
2018/02/06 PHP
PHP自动生成缩略图函数的源码示例
2019/03/18 PHP
关于query Javascript CSS Selector engine
2013/04/12 Javascript
Javascript弹出窗口的各种方法总结
2013/11/11 Javascript
浅谈JavaScript事件绑定的常用方法及其优缺点分析
2016/11/01 Javascript
Angular4 Select选择改变事件的方法
2018/10/09 Javascript
vue中如何实现后台管理系统的权限控制的方法步骤
2019/09/05 Javascript
详解微信小程序动画Animation执行过程
2020/09/23 Javascript
微信小程序调用后台service教程详解
2020/11/06 Javascript
下载给定网页上图片的方法
2014/02/18 Python
在dataframe两列日期相减并且得到具体的月数实例
2018/07/03 Python
Python中 map()函数的用法详解
2018/07/10 Python
PyTorch中常用的激活函数的方法示例
2019/08/20 Python
python GUI库图形界面开发之PyQt5选项卡控件QTabWidget详细使用方法与实例
2020/03/01 Python
keras 指定程序在某块卡上训练实例
2020/06/22 Python
HTML5 新事件 小结
2009/07/16 HTML / CSS
利用纯html5绘制出来的一款非常漂亮的时钟
2015/01/04 HTML / CSS
用HTML5制作一个简单的弹力球游戏
2015/05/12 HTML / CSS
BrandAlley英国:法国折扣奢侈品网上零售商
2017/07/03 全球购物
Charlotte Tilbury澳大利亚官网:英国美妆品牌
2018/10/05 全球购物
惠而浦美国官网:Whirlpool.com
2021/01/19 全球购物
毕业生怎样写好自荐信
2013/11/11 职场文书
职业培训师职业生涯规划
2014/02/18 职场文书
新闻传媒系求职信范文
2014/04/19 职场文书
三方协议书范本
2014/04/22 职场文书
集中整治工作方案
2014/05/01 职场文书
会计求职信
2014/05/29 职场文书
房屋转让协议书
2014/10/18 职场文书
大一新生检讨书
2014/10/29 职场文书
出国留学导师推荐信
2015/03/26 职场文书
证券公司客户经理岗位职责
2015/04/09 职场文书
小学二年级班主任工作经验交流材料
2015/11/02 职场文书
2019自荐信该如何写呢?
2019/07/05 职场文书
MySQL系列之十二 备份与恢复
2021/07/02 MySQL