脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jquery控制表单输入框显示默认值

jquery控制表单输入框显示默认值的方法

 更新时间：2015年05月22日 15:57:28   作者：不吃皮蛋  
这篇文章主要介绍了jquery控制表单输入框显示默认值的方法,可实现输入框出现出现默认值的效果,需要的朋友可以参考下

本文实例讲述了jquery控制表单输入框显示默认值的方法。分享给大家供大家参考。具体实现方法如下：

<!DOCTYPE html>
<html>
<head>
<script language="javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
 $('.someClass').each(function() {
  var $this = $(this);
  var defaultVal = $this.attr('title');
  $this.focus(function() {
   if ($this.val() === defaultVal) {
    $this.val('');
   }
  });
  $this.blur(function() {
   if ($this.val().length === 0) {
    $this.val(defaultVal);
   }
  });
 });
});
</script>
<style>
input {
 display:block;
 margin-bottom:5px;
}
</style>
</head>
<body>
<input class="someClass" type="text" title="Name" value="Name" />
<input class="someClass" type="text" title="Email Address"
value="Email Address" />
<input class="someClass" type="text" title="Default Value Here"
value="Insert form refill here" />
</body>
</html>

希望本文所述对大家的jQuery程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • 20款非常优秀的 jQuery 工具提示插件 推荐

    20款非常优秀的 jQuery 工具提示插件 推荐

    工具提示（Tooltip）在网站中的一个小功能，但却有很重要的作用，常用于显示一些温馨的提示信息。如果网站中的工具提示功能做得非常有创意的话能够加深用户对网站印象
    2012-07-07
  • JQuery+Bootstrap 自定义全屏Loading插件的示例demo

    JQuery+Bootstrap 自定义全屏Loading插件的示例demo

    这篇文章主要介绍了JQuery+Bootstrap 自定义全屏Loading插件，本文通过示例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下
    2019-07-07
  • jquery插件实现图片对比

    jquery插件实现图片对比

    这篇文章主要为大家详细介绍了jquery插件实现图片对比，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-04-04
  • Jquery 获取对象的几种方式介绍

    Jquery 获取对象的几种方式介绍

    本文为大家介绍下Jquery如何获取对象有哪几种方式，感兴趣的朋友可以参考下
    2014-01-01
  • JQuery Tips(4) 一些关于提高JQuery性能的Tips

    JQuery Tips(4) 一些关于提高JQuery性能的Tips

    如今咱祖国已经崛起了..电脑的配置也是直线上升.可是js的性能问题依然不可小觑..尤其在万恶的IE中..js引擎速度本来就慢..如果JS如果再写不好，客户端多开几个窗口假死肯定是家常便饭了.废话不说了，下面说说js性能提升的一些小Tips.
    2009-12-12
  • Jquery中扩展方法extend使用技巧

    Jquery中扩展方法extend使用技巧

    extend是常用的参数处理函数，特别是对默认值的使用，但是在使用过程中，默认值往往是不能被改变的,需要的朋友可以参考下
    2014-08-08
  • Jquery实现搜索框提示功能示例代码

    Jquery实现搜索框提示功能示例代码

    数据量很大的情况下使用Ajax去实现真的不合适，于是想采用Jquery来实现方法，具体的示例代码如下，有需求的朋友可以参考下希望对大家有所帮助
    2013-08-08
  • 使用jQuery制作遮罩层弹出效果的极简实例分享

    使用jQuery制作遮罩层弹出效果的极简实例分享

    这篇文章主要介绍了使用jQuery制作遮罩层弹出效果的极简实例分享,效果中背景为半透冥且不可操作,在制作页面上传功能等场景下十分实用,需要的朋友可以参考下
    2016-05-05
  • Jquery操作Ajax方法小结

    Jquery操作Ajax方法小结

    这篇文章主要介绍了Jquery操作Ajax方法小结的相关资料,需要的朋友可以参考下
    2015-11-11
  • jQuery向后台传入json格式数据的方法

    jQuery向后台传入json格式数据的方法

    这篇文章主要介绍了jQuery向后台传入json格式数据的方法,实例分析了传递json格式数据的原理与具体实现技巧,具有一定的参考借鉴价值,需要的朋友可以参考下
    2015-02-02

最新评论