<!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;
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) {
// alert('id:'+o.id);
// alert('input_text^:'+o.id.indexOf('input_text'));
// alert('input_area^:'+o.id.indexOf('input_area'));
// alert('input_button^:'+o.id.indexOf('input_button'));
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);
//alert("sign:"+sign);
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="">
<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>
JQuery仿Div失去焦点和输入框切换的效果
4星 · 超过85%的资源 需积分: 15 81 浏览量
2013-07-24
15:17:58
上传
评论
收藏 74KB RAR 举报 
JQuery_Model_Html.rar （2个子文件） 
JQuery_Model_input.html 6KB
js 
jquery-1.9.1.js 271KB资源评论
u0109994362014-06-04用了还是没解决问题- lisa8906082014-04-02这个还可以 只不过我的问题没有解决
- ldwi2014-05-06虽然不是我要的效果，还是给个好评吧，哈哈！
