Div失焦原理：判斷document點(diǎn)擊對象是否在Div容器以內(nèi)，否則觸發(fā)事件
需要腳本：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失焦標(biāo)記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_importfunction text_export(){if(sign == 0){return false;}else{$("#input_area").fadeOut('fast');$("#input_text").slideDown('fast');sign = 0;}}//end text_exportfunction isContainer(o) {if(o.id.indexOf('input_text') != -1){ //輸入框切換return 0;}else if(o.id.indexOf('input_area') != -1){ //DIV容器內(nèi)return 2;}else if(o.id.indexOf('input_button') != -1){ //DIV容器內(nèi)return 2;}else{ //DIV容器以外return 1;}}//end isContainerdocument.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> <!--暫未實(shí)現(xiàn)--><div id="input_button_img" class="input_button_div">圖片</div> <!--暫未實(shí)現(xiàn)--><div id="input_button_vedio" class="input_button_div">視頻</div> <!--暫未實(shí)現(xiàn)--><div id="input_button_save" class="input_button_save">保存</div> <!--自行添加--></div></div>
</div>
</body>
</html>
總結(jié)
以上是生活随笔為你收集整理的HTML5+CSS3+JQuery1.9 输入框切换和Div失焦模拟的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。
