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 相关文章推荐
QRCode.js:基于JQuery的生成二维码JS库的使用
Jun 23 jQuery
jQuery中each循环的跳出和结束实例
Aug 16 jQuery
jQuery实现倒计时功能 jQuery实现计时器功能
Sep 19 jQuery
jQuery实现动态控制页面元素的方法分析
Dec 20 jQuery
基于jQuery实现Ajax验证用户名是否可用实例
Mar 25 jQuery
jQuery实现鼠标移到某个对象时弹出显示层功能
Aug 23 jQuery
jquery.pagination.js分页使用教程
Oct 23 jQuery
jQuery动态操作表单示例【基于table表格】
Dec 06 jQuery
在vue项目中使用Jquery-contextmenu插件的步骤讲解
Jan 27 jQuery
jquery实现动态改变css样式的方法分析
May 27 jQuery
jQuery插件simplePagination的使用方法示例
Apr 28 jQuery
JavaScript或jQuery 获取option value值方法解析
May 12 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
什么是PEAR?什么是PECL?PHP中两个容易混淆的概念解释
2015/07/01 PHP
JSON两种结构之对象和数组的理解
2016/07/19 PHP
php关联数组与索引数组及其显示方法
2018/03/12 PHP
Js中sort()方法的用法
2006/11/04 Javascript
使用jquery动态加载javascript以减少服务器压力
2012/10/29 Javascript
js取值中form.all和不加all的区别介绍
2014/01/20 Javascript
JavaScript中使用数组方法汇总
2016/02/16 Javascript
js实现弹窗居中的简单实例
2016/10/09 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的三大方法
2017/01/22 Javascript
select下拉框插件jquery.editable-select详解
2017/01/22 Javascript
JS实现动态添加DOM节点和事件的方法示例
2017/04/28 Javascript
详解vue组件通信的三种方式
2017/06/30 Javascript
详解微信小程序开发用户授权登陆
2019/04/24 Javascript
JS实现简易留言板(节点操作)
2020/03/16 Javascript
antd Select下拉菜单动态添加option里的内容操作
2020/11/02 Javascript
vue中如何自定义右键菜单详解
2020/12/08 Vue.js
[36:02]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第一局
2016/02/28 DOTA
python抓取京东价格分析京东商品价格走势
2014/01/09 Python
python实现的简单RPG游戏流程实例
2015/06/28 Python
Python实现列表转换成字典数据结构的方法
2016/03/11 Python
Python 迭代器与生成器实例详解
2017/05/18 Python
Python实现随机生成有效手机号码及身份证功能示例
2017/06/05 Python
Python+matplotlib绘制不同大小和颜色散点图实例
2018/01/19 Python
Python编程中flask的简介与简单使用
2018/12/28 Python
python 自定义对象的打印方法
2019/01/12 Python
详解用python计算阶乘的几种方法
2019/08/14 Python
python中如何实现将数据分成训练集与测试集的方法
2019/09/13 Python
python入门之井字棋小游戏
2020/03/05 Python
Python3之外部文件调用Django程序操作model等文件实现方式
2020/04/07 Python
Css3圆角边框制作代码
2015/11/18 HTML / CSS
英国太阳镜品牌:Taylor Morris Eyewear
2018/04/18 全球购物
俄罗斯设计师家具购物网站:The Furnish
2019/12/01 全球购物
超市活动计划书
2014/04/24 职场文书
计算机毕业生求职信
2014/06/10 职场文书
怎样写离婚协议书
2015/01/26 职场文书
JavaScript与JQuery框架基础入门教程
2021/07/15 Javascript