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>


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/276686.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

资本冬天已至,开发者却可以着眼未来

云&#xff0c;在国内外都已成为软件开发者的首选服务。纵观历史&#xff0c;在云计算发展的这些年里&#xff0c;不管云上做了多少产品和服务&#xff0c;其实都离不开云最本质的价值体系&#xff1a;自服务、高弹性、按需提供、免运维&#xff0c;这些特性也让云服务天然成为…

mybatis 大于_酸爽!IDEA 中这么玩 MyBatis,让编码速度飞起!

作者&#xff1a;Orsoncnblogs.com/java-class/p/6237564.html1. 搭建 MyBatis Generator 插件环境a. 添加插件依赖 pom.xmlb. 配置文件 generatorConfig.xmlc. 数据库配置文件 jdbc.propertiesd. 配置插件启动项2.项目实战a. 比如在一个项目 我们要删除某个小组下某个用户的信…

Java的三种代理模式完整源码分析

Java的三种代理模式&完整源码分析 Java的三种代理模式&完整源码分析 参考资料&#xff1a; 博客园-Java的三种代理模式 简书-JDK动态代理-超详细源码分析 [博客园-WeakCache缓存的实现机制](https://www.cnblogs.com/liuyun1995/p/8144676.html) 静态代理 静态代理在使…

scatter函数_matplotlib.pyplot常用函数scatter讲解大全(三)

前言这篇文章再来总结一个常用画图函数scatter-散点图。参数常用参数示例import matplotlib.pyplot as plt import numpy as np#导入需要的包 datanp.random.multivariate_normal([0,1],[[1,0],[0,1]],200)#准备数据&#xff0c;二维正态分布plt.rcParams["axes.unicode_m…

如何彻底卸载MySQL

本文摘自&#xff1a;http://www.heiqu.com/show-64764-1.html 内容为&#xff1a; 由于安装MySQL的时候&#xff0c;疏忽没有选择底层编码方式&#xff0c;采用默认的ASCII的编码格式&#xff0c;于是接二连三的中文转换问题随之而来&#xff0c;就想卸载了重新安装MYSQL&…

vue-cli项目模板的一些思考

之前有个想法&#xff0c;就是要利用vue写一套ui。然后当时也没有搞清楚到底怎么写。 几经周转吧&#xff0c;通过付费的方式在gitbook上面找到了答案。 找到答案之后再看我们正在开发的项目&#xff0c;看伙伴写的代码&#xff0c;突然发现完全可以按照写ui组件库的方式调整目…

flex基于svn协同开发

想做一个游戏&#xff0c;正好有人陪我做。于是想到用flex来协同开发。本来是想使用cvs&#xff0c;可是结果捣鼓了半天&#xff0c;也没个结果——估计是最近没怎么看电影&#xff0c;IQ降下来了。于是改用svn。 参考资料&#xff1a;http://www.flashmagazine.com/tutorials/…

cookie与session详解

session与cookie是什么?session与cookie属于一种会话控制技术.常用在身份识别&#xff0c;登录验证&#xff0c;数据传输等.举个例子&#xff0c;就像我们去超市买东西结账的时候&#xff0c;我们要拿出我们的会员卡才会获取优惠.这时候&#xff0c;我们怎么识别这个会员卡真实…

c++万能头文件_初学Python,与C对比

✎背景学了一学年的C的基础&#xff0c;下学年开课Python&#xff0c;现在正在自学中...C也不是不学了&#xff0c;而是之前买了一本《CPrimer》在学校里&#xff0c;就准备先学一下Python&#xff0c;下学期利用自由时间接着学习C。这里分析了一下二者的优缺点&#xff0c;供大…

listen(int fd, int backlog)中的backlog含义

1. listen(int fd, int backlog)中的backlog不能限制连接数量??? http://bbs.chinaunix.net/viewthread.php?tid870564 backlog应该是未完成3次握手连接和已完成3次握手而未被accept的两对列之和.不知道我说的对不? 如果要控制连接数量,是不是要自己编码控制...下面的可以…

本地无法启动MySQL服务,报的错误:1067,进程意外终止---解决

原文链接&#xff1a;http://blog.csdn.net/shenhonglei1234/article/details/5928873 在本地计算机无法启动MYSQL服务错误1067进程意外终止 这种情况一般是my.ini文件配置出错了 首先找到这个文件&#xff1a; 默认安装路径 C:/Program Files/MySQL/MySQL Server 5.1/my.ini …

一篇文章助你理解Python3中字符串编码问题

前几天给大家介绍了unicode编码和utf-8编码的理论知识&#xff0c;以及Python2中字符串编码问题&#xff0c;没来得及上车的小伙伴们可以戳这篇文章&#xff1a;浅谈unicode编码和utf-8编码的关系和一篇文章助你理解Python2中字符串编码问题。下面在Python3环境中进行代码演示&…

Express框架开发知识点总结

express --viewpug myapp 以上语句在当前工作目录中创建名为 myapp 的 Express 应用程序&#xff0c;采用的模板是jade。 以前还在纠结使用hbs模板引擎或者ejs模板&#xff0c;实际上只要将--view后面的pug换成hbs&#xff08;使用的是Handlebars模板引擎&#xff09;&#xff…

《高级软件架构师讲义》学习笔记5

第五章 设计模式与软件架构设计 一、面向对象软件架构设计思想 a) 面向对象范式 i. 面向对象范式的核心是“对象”的概念 ii. 所有的东西都聚焦于对象 iii. 围绕对象-而非函数-组织代码 b) 对象从不同视角观察 i. 概念层&#xff1a;…

python 安装xpath_Python网络爬虫(四)- XPath1.XPath2.XPath在python中的应用

目录&#xff1a; 1.XPath XPath即为XML路径语言&#xff08;XML Path Language&#xff09;&#xff0c;它是一种用来确定XML文档中某部分位置的语言。它使用路径表达式来选取 XML 文档中的节点或节点集。节点是通过沿着路径 (path) 或者步 (steps) 来选取的。 XPath语法 2.XP…

团队升级

2019独角兽企业重金招聘Python工程师标准>>> 转载于:https://my.oschina.net/yulongblog/blog/2988702

设计模式简介

深入理解面向对象 向下&#xff1a;深入理解三大面向对象机制 封装&#xff0c;隐藏内部实现 继承&#xff0c;复用现有代码  多态&#xff0c;改写对象行为 向上&#xff1a;深刻把握面向对象机制所带来的抽象意义&#xff0c;理解如何使用这些机制来表达现实世界&#xff0c…

Css3: gradient背景渐变

Css3: gradient背景渐变 原文链接&#xff1a;http://kk073000.blog.163.com/blog/static/34826942012123111322691/ css3实现了背景渐变。 <gradient> [ <linear-gradient> | <radial-gradient> | <repeating-linear-gradient> | <repeating-r…

模板方法

重构的关键技法&#xff1a; 静态 -> 动态 早绑定 -> 晚绑定 继承 -> 组合 编译时依赖 -> 运行时依赖 紧耦合 -> 松耦合 "组件协作"模式 现代软件专业分工之后的第一个结果是“框架与应用程序的划分”&#xff0c;“组件协作”模式通过晚期绑定&#…

聚类 python_python中实现k-means聚类算法详解

算法优缺点&#xff1a; 优点&#xff1a;容易实现 缺点&#xff1a;可能收敛到局部最小值&#xff0c;在大规模数据集上收敛较慢 使用数据类型&#xff1a;数值型数据 算法思想 k-means算法实际上就是通过计算不同样本间的距离来判断他们的相近关系的&#xff0c;相近的就会放…