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插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
Apr 20 jQuery
jQuery Validate 校验多个相同name的方法
May 18 jQuery
jQuery插件artDialog.js使用与关闭方法示例
Oct 09 jQuery
springmvc接收jquery提交的数组数据代码分享
Oct 28 jQuery
jQuery动态操作表单示例【基于table表格】
Dec 06 jQuery
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
Apr 10 jQuery
jQuery实现checkbox全选、反选及删除等操作的方法详解
Aug 02 jQuery
jquery实现直播弹幕效果
Nov 28 jQuery
jquery实现垂直手风琴导航栏
Feb 18 jQuery
JQuery使用数组遍历跳出each循环
Sep 01 jQuery
jquery实现抽奖功能
Oct 22 jQuery
jQuery实现全选按钮
Jan 01 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
BBS(php &amp; mysql)完整版(五)
2006/10/09 PHP
php使用pclzip类实现文件压缩的方法(附pclzip类下载地址)
2016/04/30 PHP
php错误日志简单配置方法
2016/07/11 PHP
PHP经典算法集锦【经典收藏】
2016/09/14 PHP
jQuery中使用了document和window哪些属性和方法小结
2011/09/13 Javascript
js实现照片墙功能实例
2015/02/05 Javascript
vue v-on监听事件详解
2017/05/17 Javascript
不得不看之JavaScript构造函数及new运算符
2017/08/21 Javascript
vue-cli2.9.3 详细教程
2018/04/23 Javascript
轻松解决JavaScript定时器越走越快的问题
2019/05/13 Javascript
JavaScript常用工具函数大全
2020/05/06 Javascript
微信小程序点击生成朋友圈分享图(遇到的坑)
2020/06/17 Javascript
详解vite2.0配置学习(typescript版本)
2021/02/25 Javascript
Python3学习笔记之列表方法示例详解
2017/10/06 Python
利用python的socket发送http(s)请求方法示例
2018/05/07 Python
Python爬虫基础之XPath语法与lxml库的用法详解
2018/09/13 Python
python GUI库图形界面开发之PyQt5线程类QThread详细使用方法
2020/02/26 Python
python制作微博图片爬取工具
2021/01/16 Python
乐高官方旗舰店:LEGO积木玩具
2019/04/06 全球购物
给排水专业应届生求职信
2013/10/12 职场文书
最新教师自我评价分享
2013/11/12 职场文书
药品质量检测应届生求职信
2013/11/14 职场文书
大学自主招生自荐信
2013/12/16 职场文书
幼儿园开学家长寄语
2014/01/19 职场文书
致全体运动员广播稿
2014/02/01 职场文书
销售职业生涯规划范文
2014/03/14 职场文书
售后前台接待岗位职责
2015/04/03 职场文书
企业财务经理岗位职责
2015/04/08 职场文书
2015年副班长工作总结
2015/05/15 职场文书
2015年干部教育培训工作总结
2015/05/15 职场文书
交通事故被告代理词
2015/05/23 职场文书
解决tk mapper 通用mapper的bug问题
2021/06/16 Java/Android
SpringBoot整合minio快速入门教程(代码示例)
2022/04/03 Java/Android
PC版《死亡搁浅导剪版》现已发售 展开全新的探险
2022/04/03 其他游戏
2022新作动画《福星小子》释出宣传影片 加入内田真礼&宫野真守配音演出
2022/04/08 日漫
SQL语句多表联合查询的方法示例
2022/04/18 MySQL