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程序设计有所帮助。

赞 (0)

相关推荐

  • IE下支持文本框和密码框placeholder效果的JQuery插件分享

    很久之前写了这个插件,基于jQuery实现的,主要用于IE下实现placeholder效果,可同时支持文本和密码输入框. placeholder是HTML5新增的一个属性,当input设置了该属性后,该值的内容将作为灰色提示显示在文本框中,当文本框获得焦点时,提示文字消失. 下载地址:http://xiazai.jb51.net/201501/other/placeholderfriend.rar 实现代码如下: 复制代码 代码如下: (function($) {   /**    * 没有开花

  • js与jquery实时监听输入框值的oninput与onpropertychange方法

    本文实例讲述了js与jquery实时监听输入框值的oninput与onpropertychange方法.分享给大家供大家参考.具体如下: 最近做过一个项目,需求是下拉框里自动匹配关键字,具体细节是实时监听文本框 value 值的变化,然后匹配相关内容. 初接项目,首先想到的是 JQ 里的 change,但是马上排除此方法,因为 change 是在文本框失去焦点时才会触发.曲线救国一下,想到用 keydown 来解决.其他一切还好,只是当不通过键盘操作,而是通过鼠标来复制粘贴时,这个事件是无法触发

  • 密码框显示提示文字jquery示例

    复制代码 代码如下: <html> <head> <title>登录</title> <script type="text/javascript" src="./jquery-1.3.2.min.js"></script> <script> $(document).ready(function(){ $(".text_login").focus(function(

  • jQuery实现6位数字密码输入框

    下个月就要过年了,感觉有点瞎忙.翻了翻博客,感觉这个月都在打酱油啊.借口那么多,其实真的有点懒了,呵呵! 我争取在放假前,将自我总结以及来年计划发出来,把自己打造为勉族,不然真要浑噩度日了. 前几天,项目有个功能和某宝购物支付密码的输入框有点类似,就自己写了这篇博文,权当总结笔记吧. 啰嗦半天了,直接上代码: 结构层: <div> <div>请在下方输入6位数字</div> <div class="ipt-box-nick"> <i

  • jQuery判断密码强度实现思路及代码

    jQuery判断密码强度实现思路及代码

    复制代码 代码如下: <head> <title></title> <script src="jquery-1.9.1.js" type="text/javascript"></script> <style type="text/css"> .qiang{background:url(/images/pas4.JPG) no-repeat;width:150px;height

  • jquery实现输入框实时输入触发事件代码

    话不多说,请看代码 $('.aa').bind('input propertychange', function() { searchProductClassbyName(); }); function searchProductClassbyName() { 写函数内容 } 以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持我们!

  • JQuery记住用户名和密码的具体实现

    复制代码 代码如下: <div> <input id="username" type="text" class="txt1" value="请输入用户名" onclick="if(this.value=='请输入用户名'){this.value=''; }" onfocus="if(this.value=='请输入用户名'){this.value=''; }" />

  • jQuery实现的输入框选择时间插件用法实例

    本文实例讲述了jQuery实现的输入框选择时间插件用法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!dooCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <meta charset = utf8> <

  • Jquery动态添加输入框的方法

    Jquery动态添加输入框的方法

    本文实例讲述了Jquery动态添加输入框的方法.分享给大家供大家参考.具体实现方法如下: <!-- 页头 --> <#include "../common/head.ftl"> <div id="onFailureDiv" class="alert alert-danger navbar-fixed-top" style="text-align:center; display:none">&

  • jquery 实现密码框的显示与隐藏示例代码

    复制代码 代码如下: <html> <head> <script type="text/javascript" src="jquery-1.5.1.min.js"></script> <script type="text/javascript"> $(function(){ $("#chk").bind({ click: function(){ if($(this).

随机推荐