HTML5+CSS3+JQuery1.9 输入框切换和Div失焦模拟_html中jquery对div的失焦-CSDN博客

本文链接：https://blog.csdn.net/dmtnewtons_blog/article/details/9453039
Div失焦原理：判断document点击对象是否在Div容器以内，否则触发事件
需要脚本：jquery-1.9.1.js
下载地址：http://download.csdn.net/detail/dmtnewtons/5807757
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQuery_Model_input</title>
<style type="text/css">
/*初始化*/
:link,:visited { text-decoration:none }
ul,ol { list-style:none }
h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; }
a img,:link img,:visited img { border:none }
address { font-style:normal }
body, html, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5 ,h6, pre, form, fieldset, input, p, blockquote, th, td,button, table,tr,tbody
{ margin:0; padding:0; font-size:14px;}
ul,ol { list-style:none;}
address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal;}
fieldset, img {border:0;}
div { display:block;}

/*输入框样式*/
.input_{ width:800px; }
.input_text{
	width:600px;
	padding:8px;
	font-size:14px;
	vertical-align:middle;
	margin:0;
	border:solid 1px;
	display:block;
	border: 1px solid #C4C4C4;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: inset 0 1px 5px #DDD;
    -moz-box-shadow: inset 0 1px 5px #ddd;
    box-shadow: inset 0 1px 5px #DDD;
	color:#999999;
	}
.input_area{
	position: relative;
    width:600px;
	min-height:100px;
    border: 1px solid #C1C1C1;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    background: white;
    margin-bottom: 20px;
    _border: 1px solid #C1C1C1;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.3);
    -webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2);
    padding:8px;
    z-index:300;
	}
.input_area_box{
    border: 1px solid #C4C4C4;
    cursor: text;
    position: relative;
    -webkit-box-shadow: inset 0 1px 2px #DDD;
    -moz-box-shadow: inset 0 1px 2px #ddd;
    box-shadow: inset 0 1px 2px #DDD;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    -webkit-box-shadow: inset 0 1px 2px #DDD;
    -moz-box-shadow: inset 0 1px 2px #ddd;
    box-shadow: inset 0 1px 2px #DDD;
}
.input_area_import{
	padding: 3px 6px 5px 10px;
    width:100%;
    height: 100px;
    font-size:14px;
    line-height:22px;
    border: none;
    outline: none;
    resize: none;
    border:0px solid #FFF;
	}
.inpput_button{
	width:100%;
	height:40px;
	}
.input_button_div, .input_button_save{
	width:46px;
	height:22px;
	text-align:center;
	letter-spacing:5px;
	padding-top:5px;
	padding-left:5px;
	border: 1px solid #CCC;
    background-color: #F8F8F8;
    background-image: -webkit-linear-gradient(top,#F8F8F8,#F1F1F1);
    background-image: -moz-linear-gradient(top,#F8F8F8,#F1F1F1);
    background-image: -ms-linear-gradient(top,#F8F8F8,#F1F1F1);
    background-image: -o-linear-gradient(top,#F8F8F8,#F1F1F1);
    background-image: linear-gradient(top,#F8F8F8,#F1F1F1);
	-webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.1);
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    color: #999999;
	cursor:pointer;
	}
.input_button_div:hover, .input_button_save:hover{
	background-color: #CCCCCC;
    background-image: -webkit-linear-gradient(top,#CCCCCC,#F1F1F1);
    background-image: -moz-linear-gradient(top,#CCCCCC,#F1F1F1);
    background-image: -ms-linear-gradient(top,#CCCCCC,#F1F1F1);
    background-image: -o-linear-gradient(top,#CCCCCC,#F1F1F1);
    background-image: linear-gradient(top,#CCCCCC,#F1F1F1);
	color: #333333;
	}
.input_ .input_text{ margin-left:100px;	margin-top:50px; }
.input_ .input_text:hover{ cursor:text; }
.input_ .input_area{ margin-left:100px; margin-top:50px; display:none; }
.input_ .input_area_import{ }
.input_button .input_button_div{ float:left; margin:2px 5px; }
.input_button .input_button_save{ float:right; margin:2px 5px; }
</style>
<script language="javascript" type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script language="javascript" type="text/javascript">
jQuery(function($) {
  var sign = 0;    //Div失焦标记
  function text_import(){
  	if(sign == 1){
		return false;
	}else{
		$("#input_text").fadeOut('fast');	//淡出
		$("#input_area").slideDown('fast');	//滑入
		$("#input_area_import").focus();
		sign = 1;
	}//end if
  }//end text_import
  
  function text_export(){
  	if(sign == 0){
		return false;
	}else{
		$("#input_area").fadeOut('fast');
		$("#input_text").slideDown('fast');
		sign = 0;
	}
  }//end text_export
  
  function isContainer(o) {
	if(o.id.indexOf('input_text') != -1){			//输入框切换
		return 0;
	}else if(o.id.indexOf('input_area') != -1){		//DIV容器内
		return 2;
	}else if(o.id.indexOf('input_button') != -1){	//DIV容器内
		return 2;
	}else{											//DIV容器以外
		return 1;
	}
  }//end isContainer
  
  document.onclick = function (e) {
	 e = e || window.event;
	 var o = e.target || e.srcElement;
	 sign = isContainer(o);	
	 switch(sign){
		case 0:
			text_import();
			break;
		case 1:
			text_export();
			break;
		default:
			break;
	 }
  }//end document
       
});
</script>
</head>
<body>
<div id="input_" class="input_">
	<div id="input_text" class="input_text">
		请输入……
	</div>
	<div id="input_area" class="input_area">
		<div id="input_area_txt">
		<textarea id="input_area_import" class="input_area_import" placeholder="" name="" cols="" rows="" autocomplete="off" goog_input_chext="chext"></textarea>
		</div>
		<div id="input_button" class="input_button">
			<div id="input_button_file" class="input_button_div">文件</div>  <!--暂未实现-->
			<div id="input_button_img" class="input_button_div">图片</div>   <!--暂未实现-->
			<div id="input_button_vedio" class="input_button_div">视频</div> <!--暂未实现-->
			<div id="input_button_save" class="input_button_save">保存</div> <!--自行添加-->
		</div>
	</div>
</div>
</body>
</html>