HTML5+CSS3+JQuery1.9 输入框切换和Div失焦模拟

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_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容器内return 2;}else if(o.id.indexOf('input_button') != -1){   //DIV容器内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>  <!--暂未实现--><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>

HTML5+CSS3+JQuery1.9 输入框切换和Div失焦模拟相关推荐

html5 css3 slider,使用html5+css3来实现slider切换效果告别javascript+css_html5教程技巧
好吧,上次说要赶紧的补上几篇文章,结果淡定的失约了.又是近一个月才发一篇,真是让人郁闷.发现最近总是抽不出时间了,基本都是一个项目接一个项目的安排,自己不是在空闲的时候找不到合适的话题,就是在有纠结话 ...
html 设置div占位符,HTML5+CSS3 一组文本输入框占位符动效
CSS 语言: CSSSCSS 确定 body { color: #666; font-family: Arial, Helvetica, sans-serif; } html { box-sizin ...
好程序员web前端分享DIV+CSS3和html5+CSS3有什么区别
为什么80%的码农都做不了架构师?>>> 好程序员web前端分享DIV+CSS3和html5+CSS3有什么区别,不管是DIV+CSS3还是html5+CSS3,他们都是我们对 ...
HTML5+CSS3小实例：抽屉式分享按钮切换效果
HTML5+CSS3做一个抽屉式分享按钮切换效果,这个案例属于代码简单,效果惊艳,上手容易系列,主要用到的是 transition ,还有,字体图标用到的依然是 font-awesome. 效果: 源 ...
html5+css3圆角图文展示卡片层叠滑动切换js特效
下载地址 html5+css3圆角图文展示卡片层叠滑动切换特效,支持鼠标拖动或手指触屏滑过卡片切换到下一张卡片信息. dd:
html5自适应性响应式banner幻灯片切换,html5 css3 bootstrap响应式幻灯片带进度条的图片切换效果代码...
特效描述:html5 css3 bootstrap 响应式幻灯片带进度条图片切换效果.jquery+css3带倒计时的全屏幻灯片插件Bootslider.js 代码结构 1. 引入CSS 2. 引 ...
HTML5/CSS3基础——div盒子水平垂直居中的三种方案
HTML5/CSS3基础--div盒子水平垂直居中的三种方案一.基于定位的使div盒子水平居中的三种方式 1.使用top:50% left:50% 以及margin-top 和 margin-lef ...
html图片自动在div里放大,HTML5+CSS3实现图片的放大/缩小
原标题:HTML5+CSS3实现图片的放大/缩小最近做项目时,经常遇到需要图片缓慢放大的效果.我做的时候想到了几种方法,所以来总结一下. 1. 利用css改变图片的宽高,做出视觉上的放大. 首先,将 ...
python 50 前端 html5 css3
1 # 前端 2 3 接下来我们进入前端知识的学习,前端的学习目的就是为我们开发的应用程序提供一个与用户进行交互的界面,前端分为HTML5.CSS3.JavaScript三大部分,我们学习内容共分 ...

HTML5+CSS3+JQuery1.9 输入框切换和Div失焦模拟

HTML5+CSS3+JQuery1.9 输入框切换和Div失焦模拟相关推荐

最新文章

热门文章