tipinput_tl

最新推荐文章于 2023-05-20 11:06:37 发布

原创最新推荐文章于 2023-05-20 11:06:37 发布 · 681 阅读

CC 4.0 BY-SA版权

<!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>hello</title>
<script src="./jquery-1.7.2.js"></script>
<script>
	/**
	* 2012-11-07 taylor
	*/
	$.fn.tipinput_tl = function(options){
		var defaults = {
			tip : "",
			addCss : "test"
		};
		
		var options = $.extend(defaults, options);

		return $(this).each(function(){
			var $tooltipsId = $(this).attr("id");

			var isPassword = $(this).attr("type") == "password" ? true : false;

			var tip = options.tip;

			var $this = $(this);

			var _password;

			if(isPassword){
				_password = $("<input type='text'>").addClass($this.attr("class")).insertAfter($(this)).val(tip);
				$this.hide();
				_password.bind("focus",function(){
					$(this).keydown(function(){
						$this.show().focus();
						_password.hide();
					}).addClass(options.addCss);
					if($(this).val() == tip){
						$(this).val("");
					}
				}).bind("blur",function(){
					$(this).removeClass(options.addCss);
					$(this).val(tip);
				});
			}else{
				$this.val(tip);
			}

			$this.bind("focus",function(){
				$this.addClass(options.addCss);
				if($this.attr("type") == "text" &&  $this.val() == tip){
					$this.val("");
				}
			}).bind("blur",function(){
				$this.removeClass(options.addCss);
				if(isPassword && $this.val() == ""){
					_password.val(tip).show();
					$this.hide();
				}else{
					if($this.attr("type") == "text" && $this.val() == ""){
						$this.val(tip);
					}
				}
			});
		});

	};
	$(function(){
		$("#test1").tipinput_tl({
			tip : '用户名'
		});
		$("#password1").tipinput_tl({
			tip : '重复密码'
		});
	});
</script>
<style>
	.test{
		border : 1px solid red;
	}
</style>
</head>
<body>
	<input type="text" name="test1" id="test1">
	<input type="password" name="password1" id="password1" >
</body>
</html>