HTML5+CSS3+JQuery1.9 输入框切换和Div失焦模拟
来源：互联网 发布：中交天津工贸公司知乎 编辑：程序博客网 时间：2024/06/05 16:25
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>- HTML5+CSS3+JQuery1.9 输入框切换和Div失焦模拟
- DIV + CSS3 和 html5 + CSS3的区别
- div模拟输入框
- div模拟输入框
- div模拟text输入框
- html5 div 模拟textarea
- div模拟页面切换
- html5和CSS3兼容性
- HTML5和CSS3
- HTML5和CSS3
- HTML5 和 CSS3
- Html5和CSS3补充
- HTML5 和CSS3 基础知识
- 输入框和div拖动
- HTML5+CSS3+JS 选项卡切换
- 什么是HTML5和CSS3？HTML5和CSS3的新特性
- CSS3 和 HTML5 兼容速查表
- css3和html5的学习
- poj2828
- STL利用输入迭代器读入文本文件中的数据
- android开发 activity 的四种启动模式！
- 取ds的行数,FOR数组遍历，没有用foreach
- Basic Git commands
- HTML5+CSS3+JQuery1.9 输入框切换和Div失焦模拟
- 《YV12和I420的区别》评注
- 出租车费
- ORACLE ORDER BY 排序规则
- LPCTSTR和CString的关系
- C# 从exce里读取时间
- oracle update commit 后恢复
- 编程的未来
- 步步学GDB-《2》
