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 相关文章推荐
浅谈struts1 &amp; jquery form 文件异步上传
May 25 jQuery
使用jQuery实现购物车结算功能
Aug 15 jQuery
jquery ajax异步提交表单数据的方法
Oct 27 jQuery
jQuery+SpringMVC中的复选框选择与传值实例
Jan 08 jQuery
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
Apr 26 jQuery
基于jquery实现左右上下移动效果
May 02 jQuery
jQuery创建及操作xml格式数据示例
May 26 jQuery
jQuery实现基本隐藏与显示效果的方法详解
Sep 05 jQuery
jQuery实现的别踩白块小游戏完整示例
Jan 07 jQuery
jQuery中使用validate插件校验表单功能
May 24 jQuery
JQuery实现折叠式菜单的详细代码
Jun 03 jQuery
jQuery+ThinkPHP实现图片上传
Jul 23 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面试题 试试看看你会不会也中招
2014/08/19 PHP
PHP cURL获取微信公众号access_token的实例
2018/04/28 PHP
使用git迁移Laravel项目至新开发环境的步骤详解
2020/04/06 PHP
PHP7 其他修改
2021/03/09 PHP
JavaScript 撑出页面文字换行
2009/06/15 Javascript
js或css实现滚动广告的几种方案
2010/01/28 Javascript
extjs grid设置某列背景颜色和字体颜色的实现方法
2010/09/06 Javascript
基于jQuery的message插件实现右下角弹出消息框
2011/01/11 Javascript
jquery ajax例子返回值详解
2012/09/11 Javascript
node.js中的fs.rmdir方法使用说明
2014/12/16 Javascript
javascript删除html标签函数cIsHTML
2017/01/09 Javascript
JS获取本周周一,周末及获取任意时间的周一周末功能示例
2017/02/09 Javascript
解决nodejs中使用http请求返回值为html时乱码的问题
2017/02/18 NodeJs
react 父组件与子组件之间的值传递的方法
2017/09/14 Javascript
Javascript网页抢红包外挂实现分享
2018/01/11 Javascript
JSON基本语法及与JavaScript的异同实例分析
2019/01/04 Javascript
详解webpack 最简打包结果分析
2019/02/20 Javascript
微信小程序实现弹框效果
2020/05/26 Javascript
python实现根据图标提取分类应用程序实例
2014/09/28 Python
Linux中Python 环境软件包安装步骤
2016/03/31 Python
轻松掌握python设计模式之策略模式
2016/11/18 Python
python获取外网IP并发邮件的实现方法
2017/10/01 Python
python实现图片批量压缩程序
2018/07/23 Python
记录Python脚本的运行日志的方法
2019/06/05 Python
pandas DataFrame 行列索引及值的获取的方法
2019/07/02 Python
Python下载网易云歌单歌曲的示例代码
2020/08/12 Python
Artist Guitars新西兰:乐器在线商店
2017/09/17 全球购物
奥地利领先的在线药房:SHOP APOTHEKE
2019/10/07 全球购物
shell程序如何生命变量?shell变量是弱变量吗?
2014/11/10 面试题
Unix如何添加新的用户
2014/08/20 面试题
副校长竞聘演讲稿
2014/09/01 职场文书
2015年教研员工作总结
2015/05/26 职场文书
《秋思》教学反思
2016/02/23 职场文书
创业计划书之面包店
2019/09/17 职场文书
pytorch中的 .view()函数的用法介绍
2022/03/17 Python
安装Ruby和 Rails的详细步骤
2022/04/19 Ruby