jQuery实现设置.移除文本框默认值功能

这篇文章主要介绍了jQuery实现设置、移除文本框默认值功能,本文实现是类似html5 placeholder(空白提示)效果,正常时文本框有提示文字,当文本框获得焦点时变为空白,需要的朋友可以参考下

jQuery实现的文本框默认值感应鼠标动作:

本章节介绍一下如何利用jQuery实现文本框默认值感应鼠标动作的功能。
比如当文本框获取鼠标焦点的时候,默认值会被清空,当文本框没有输入内容,鼠标焦点离开的时候,又会恢复到默认值。
代码实例:


<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<title>脚本之家</title>

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  $("#email").focus(function(){ 

    var email_txt = $(this).val(); 

    if(email_txt == this.defaultValue){ 

      $(this).val(""); 

    } 

  }) 

  $("#email").blur(function(){ 

    var email_txt = $(this).val(); 

    if (email_txt == "") { 

      $(this).val(this.defaultValue); 

    } 

  }) 

})

</script> 

</head> 

<body> 

<p><input type="text" value="请输入邮箱地址" id="email"/></p> 

</body> 

</html>

上面的代码实现了我们的要求,下面简单介绍一下它的实现原理:

非常的简单,就是为文本框注册focus和blur事件处理函数,当文本框获取焦点的时候,如果文本框的内容和默认值相同,那么就会清空文本框,当焦点离开文本框的时候,如果文本框的内容为空,那么就会恢复到默认值。

或者使用下面的代码:

复制代码 代码如下:


$('.default-value').each(function() {
       var default_value = this.value;
       $(this).focus(function(){

               if(this.value == default_value) {

                       this.value = '';

               }

       });
       $(this).blur(function(){

               if(this.value == '') {

                       this.value = default_value;

               }

       });
});
分类:jquery 时间:2014-05-24 人气:13
本文关键词: jquery 设置 文本框 默认值 移除
分享到:

相关文章

iOS 开发

Android 开发

Python 开发

JAVA 开发

开发语言

PHP 开发

Ruby 开发

搜索

前端开发

数据库

开发工具

开放平台

Javascript 开发

.NET 开发

云计算

服务器

Copyright (C) codeweblog.com, All Rights Reserved.

CodeWeblog.com 版权所有 闽ICP备15018612号

processed in 0.042 (s). 12 q(s)