热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

jQuery表单获取和失去焦点输入框提示效果的实例代码

这篇文章介绍了jQuery表单获取和失去焦点输入框提示效果的实例代码,有需要的朋友可以参考一下
代码如下:

  $("#focus .input_txt").each(function(){
  var thisVal=$(this).val();
  //判断文本框的值是否为空,有值的情况就隐藏提示语,没有值就显示
  if(thisVal!=""){
  $(this).siblings("span").hide();
  }else{
  $(this).siblings("span").show();
  }
  //聚焦型输入框验证 
  $(this).focus(function(){
  $(this).siblings("span").hide();
  }).blur(function(){
  var val=$(this).val();
  if(val!=""){
  $(this).siblings("span").hide();
  }else{
  $(this).siblings("span").show();
  } 
  });
  })
  $("#keydown .input_txt").each(function(){
  var thisVal=$(this).val();
  //判断文本框的值是否为空,有值的情况就隐藏提示语,没有值就显示
  if(thisVal!=""){
  $(this).siblings("span").hide();
  }else{
  $(this).siblings("span").show();
  }
  $(this).keyup(function(){
  var val=$(this).val();
  $(this).siblings("span").hide();
  }).blur(function(){
  var val=$(this).val();
  if(val!=""){
  $(this).siblings("span").hide();
  }else{
  $(this).siblings("span").show();
  }
  })
  }) 
  })




 
       

聚焦型提示语消失  无效果请刷新


       
       
   
 
     

输入型提示语消失


     
       
   



推荐阅读
  • 使用Bootstrap创建响应式渐变固定头部导航栏的方法
    本文详细介绍了如何利用Bootstrap框架构建一个具有渐变效果的固定顶部响应式导航栏,包括HTML结构、CSS样式以及JavaScript交互的完整实现过程。适合前端开发者和学习者参考。 ... [详细]
  • 本文探讨了使用JQuery UI可调整大小插件时遇到的一个常见问题:如何在用户调整元素大小后避免不必要的点击事件触发,导致元素被意外取消选中。 ... [详细]
  • 本文详细介绍了如何使用JavaScript实现数据的双向绑定,包括MVVM架构的基本概念、不同框架下的实现方式以及具体的代码示例。 ... [详细]
  • 本文详细探讨了函数与对象方法的主要区别,包括它们的定义方式、调用规则以及在面向对象编程语言中的应用特点。 ... [详细]
  • HTML5实现逼真树叶飘落动画详解
    本文详细介绍了如何利用HTML5技术创建一个逼真的树叶飘落动画,包括HTML、CSS和JavaScript的代码实现及优化技巧。 ... [详细]
  • NFC OMA 接口访问优化
    本文探讨了NFC设备中OMA接口的访问方式,特别是针对IC制造商提供的NFC swp-sim访问与NFC服务提供商对eSe(嵌入式安全元件)访问的不同处理方法。文中提出了几种解决方案以解决由此产生的双SmartcardService运行问题。 ... [详细]
  • 深入探讨PHP中的输出缓冲技术(Output Buffering)
    本文深入解析了PHP中输出缓冲(Output Buffering)的原理及其在Web开发中的应用,特别是如何通过输出缓冲技术有效管理HTTP头部信息,提高代码的灵活性与健壮性。 ... [详细]
  • 深入理解Java NIO:基础概念与原理
    本文介绍了Java NIO(New Input/Output)的基本概念,包括同步与异步、阻塞与非阻塞等核心理念,以及NIO相对于传统IO的优势和应用场景。通过详细解析这些概念,帮助读者更好地理解和掌握NIO的使用。 ... [详细]
  • 本问题涉及对一个非负整数数组执行加一操作。数组以最高位数字在前的方式存储,每个数组元素仅包含一位数字。假设该整数没有前导零,除非该整数为0。 ... [详细]
  • 本文详细介绍了 Freemarker 模板引擎中的 include 指令,以及如何利用该指令从其他文件中引入内容,以增强页面的模块化和可维护性。 ... [详细]
  • 深入理解Kafka架构
    本文将详细介绍Kafka的内部工作机制,包括其工作流程、文件存储机制、生产者与消费者的具体实现,以及如何通过高效读写技术和Zookeeper支持来确保系统的高性能和稳定性。 ... [详细]
  • 本文详细介绍了ejabberd中的验证码服务、接收器以及服务器间通信的监督者和工作进程,包括它们的启动方式和主要功能。 ... [详细]
  • 在Ubuntu 16.04中使用Anaconda安装TensorFlow
    本文详细介绍了如何在Ubuntu 16.04系统上通过Anaconda环境管理工具安装TensorFlow。首先,需要下载并安装Anaconda,然后配置环境变量以确保系统能够识别Anaconda命令。接着,创建一个特定的Python环境用于安装TensorFlow,并通过指定的镜像源加速安装过程。最后,通过一个简单的线性回归示例验证TensorFlow的安装是否成功。 ... [详细]
  • 列表是 Python 编程语言中最常用的数据结构之一,它类似于其他编程语言中的数组。本文将详细介绍 Python 3 中列表的基本操作和特性。 ... [详细]
  • 本文介绍了如何在Angular CLI创建的项目中安装并配置Bootstrap,包括必要的依赖项jQuery和Popper.js的安装步骤。 ... [详细]
author-avatar
淘气111006
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有