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 相关文章推荐
JS与jQuery实现子窗口获取父窗口元素值的方法
Apr 17 jQuery
jQuery Masonry瀑布流布局神器使用详解
May 25 jQuery
基于jQuery和CSS3实现APPLE TV海报视差效果
Jun 16 jQuery
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
Aug 23 jQuery
jquery animate动画持续运动的实例
Nov 29 jQuery
jQuery中的$是什么意思及 $. 和 $().的区别
Apr 20 jQuery
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
Apr 27 jQuery
JQuery通过后台获取数据遍历到前台的方法
Aug 13 jQuery
jQuery常见的遍历DOM操作详解
Sep 05 jQuery
jQuery easyui datagird编辑行删除行功能的实现代码
Sep 20 jQuery
jquery将信息遍历到界面上实例代码
Jan 21 jQuery
jquery传参及获取方式(两种方式)
Feb 13 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
无线电波是什么?它是怎样传输的?
2021/03/01 无线电
提问的智慧(2)
2006/10/09 PHP
php中使用redis队列操作实例代码
2013/02/07 PHP
PHP中使用虚代理实现延迟加载技术
2014/11/05 PHP
PHP设计模式入门之状态模式原理与实现方法分析
2020/04/26 PHP
JS解析json数据并将json字符串转化为数组的实现方法
2012/12/25 Javascript
圣诞节Merry Christmas给博客添加浪漫的下雪效果基于jquery实现
2012/12/27 Javascript
JS复制到剪贴板示例代码
2013/10/30 Javascript
JS读取XML文件数据并以table形式显示数据的方法(兼容IE与火狐)
2016/06/02 Javascript
Bootstrap轮播插件中图片变形的终极解决方案 使用jqthumb.js
2016/07/10 Javascript
nodejs实例解析(输出hello world)
2017/01/03 NodeJs
Angular4学习教程之DOM属性绑定详解
2018/01/04 Javascript
JS设计模式之访问者模式定义与用法分析
2018/02/05 Javascript
webpack中使用iconfont字体图标的方法
2018/02/22 Javascript
nvm、nrm、npm 安装和使用详解(小结)
2019/01/17 Javascript
js实现简单贪吃蛇游戏
2020/05/15 Javascript
使用React-Router实现前端路由鉴权的示例代码
2020/07/26 Javascript
解决vue项目运行npm run serve报错的问题
2020/10/26 Javascript
python遍历类中所有成员的方法
2015/03/18 Python
python针对excel的操作技巧
2018/03/13 Python
django query模块
2019/04/20 Python
基于python2.7实现图形密码生成器的实例代码
2019/11/05 Python
通过python 执行 nohup 不生效的解决
2020/04/16 Python
html5音频_动力节点Java学院整理
2018/08/22 HTML / CSS
美国求婚钻戒网站:Super Jeweler
2016/08/27 全球购物
The Body Shop美体小铺西班牙官网:天然化妆品
2019/06/21 全球购物
将"引用"作为函数参数有哪些特点
2013/04/05 面试题
两道JAVA笔试题
2016/09/14 面试题
通息工程毕业生自荐信
2013/10/16 职场文书
2014乡镇班子个人对照检查材料思想汇报
2014/09/26 职场文书
党支部群众路线整改措施思想汇报
2014/10/10 职场文书
商超业务员岗位职责
2015/02/13 职场文书
2015年大学社团工作总结
2015/04/09 职场文书
2015年乡镇民政工作总结
2015/05/13 职场文书
终止解除劳动合同证明书
2015/06/17 职场文书
告别网页搜索!教你用python实现一款属于自己的翻译词典软件
2021/06/03 Python