2016.07 第3周 群问题分享

HTML+CSS

怎么实现输入框高度自适应

2016.07.18~2016.07.22

核心内容

contenteditable

问题解析

因为textarea不支持自适应高度,就是定好高度或者是行数之后,超出部分就会显示滚动条,看起来不美观。

而用div来模拟时,首先遇到的问题是:div怎么实现输入功能?

contenteditable 属性规定是否可编辑元素的内容。

可能我们还是第一次见到这个属性contenteditable,如一个普通的元素上加上contenteditable="true"就实现可编辑状态,就出现光标了。如

<div contenteditable="true"></div>

效果:

contenteditable属性虽是HTML5里面的内容,但是IE似乎老早就支持此标签属性了。所以,兼容性方面还是不用太担心的。

HTML代码

<div class="wrap" contenteditable="true"></div>

CSS代码

.wrap {
    width: 400px; 
    min-height: 20px; 
    max-height: 300px;
    _height: 120px; 
    margin-left: auto; 
    margin-right: auto; 
    padding: 3px; 
    border: 1px solid #a0b3d6; 
    line-height: 24px;
    font-size: 12px; 
    word-wrap: break-word;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0; 
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
}

CSS代码中,因为IE6不支持min/max,所以做了hack,其他的也好理解。

效果:

JavaScript

focus/blur与focusin/focusout的区别与联系

2016.07.18~2016.07.22

核心内容

focus/blur与focusin/focusout

问题解析

  1. focus/blur不冒泡,focusin/focusout冒泡
  2. focus/blur兼容性好,focusin/focusout在除FireFox外的浏览器下都保持良好兼容性,如需使用事件委托,可考虑在FireFox下使用事件流elem.addEventListener(‘focus’, handler, true)
  3. 可获得焦点的元素: window 链接被点击或键盘操作 表单空间被点击或键盘操作 设置tabindex属性的元素被点击或键盘操作

===运算符判断相等的流程是怎样的

2016.07.18~2016.07.22

核心内容

操作符

问题解析

1、如果两个值不是相同类型,它们不相等

2、如果两个值都是null或者都是undefined,它们相等

3、如果两个值都是布尔类型true或者都是false,它们相等

4、如果其中有一个是NaN,它们不相等

5、如果都是数值型并且数值相等,他们相等, -0等于0

6、如果它们是字符串并且在相同位置包含相同的字符,它们相等;如果在长度或者内容上不等,它们不相等;两个字符串显示结果相同但是编码不同==和===都认为他们不相等

7、如果它们指向相同对象、数组、函数,它们相等;如果指向不同对象,他们不相等

Web storage和cookie的区别

2016.07.18~2016.07.22

核心内容

Web storage和cookie

问题解析

Web storage的概念和cookie相似,storage是为了更大容量存储设计的。cookie的大小是受限的,并且每次你请求一个新的页面的时候cookie都会被发送过去,这样无形中浪费了带宽,另外cookie还需要指定作用域,不可以跨域调用。

除此之外,Web storage拥有setItem,getItem,removeItem,clear等方法,不像cookie需要前端开发者自己封装setCookie,getCookie等方法。

但是Cookie也是不可或缺的:cookie的作用是与服务器进行交互,作为HTTP规范的一部分而存在 ,而Web storage仅仅是为了在本地“存储”数据而生。

浏览器的支持除了IE7及以下不支持外,其他标准浏览器都完全支持Web storage(ie及FF需在web服务器里运行),值得一提的是IE总是办好事,例如IE7、IE6中的UserData其实就是JavaScript本地存储的解决方案。通过简单的代码封装可以统一到所有的浏览器都支持Web storage。cookie的兼容性小编就不说,因为cookie很早就出现了。

localStorage和sessionStorage都具有相同的操作方法,例如setItem、getItem和removeItem等

JS数组去重

2016.07.18~2016.07.22

核心内容

indexOf()、push()

问题解析

Array.prototype.unique1 = function () {
  var n = []; //一个新的临时数组
  for (var i = 0; i < this.length; i++)   { //遍历当前数组
    //如果当前数组的第i已经保存进了临时数组,那么跳过,
    //否则把当前项push到临时数组里面
    if (n.indexOf(this[i]) == -1) n.push(this[i]);
  }
  return n;
}


Array.prototype.unique2 = function() {
    var n = {},r=[]; //n为hash表,r为临时数组
    for(var i = 0; i < this.length; i++) { //遍历当前数组
        if (!n[this[i]]) //如果hash表中没有当前项
        {
            n[this[i]] = true; //存入hash表
            r.push(this[i]); //把当前数组的当前项push到临时数组里面
        }
    }
    return r;
}


Array.prototype.unique3 = function() {
    var n = [this[0]]; //结果数组
    for(var i = 1; i < this.length; i++) { //从第二项开始遍历
        //如果当前数组的第i项在当前数组中第一次出现的位置不是i,
        //那么表示第i项是重复的,忽略掉。否则存入结果数组
        if (this.indexOf(this[i]) == i) n.push(this[i]);
    }
    return n;
}

HTML5学堂小编 - 陈林&堡堡 耗时5h

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2016-07-24

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏闻道于事

js登录滑动验证,不滑动无法登陆

js的判断这里是根据滑块的位置进行判断,应该是用一个flag判断 <%@ page language="java" contentType="text/html...

6948
来自专栏我和未来有约会

Kit 3D 更新

Kit3D is a 3D graphics engine written for Microsoft Silverlight. Kit3D was inita...

2586
来自专栏我和未来有约会

Silverlight第三方控件专题

这里我收集整理了目前网上silverlight第三方控件的专题,若果有所遗漏请告知我一下。 名称 简介 截图 telerik 商 RadC...

4045
来自专栏魂祭心

原 canvas绘制clock

4164
来自专栏Ceph对象存储方案

Luminous版本PG 分布调优

Luminous版本开始新增的balancer模块在PG分布优化方面效果非常明显,操作也非常简便,强烈推荐各位在集群上线之前进行这一操作,能够极大的提升整个集群...

3195
来自专栏转载gongluck的CSDN博客

cocos2dx 打灰机

#include "GamePlane.h" #include "PlaneSprite.h" #include "BulletNode.h" #include...

5566
来自专栏C#

DotNet加密方式解析--非对称加密

    新年新气象,也希望新年可以挣大钱。不管今年年底会不会跟去年一样,满怀抱负却又壮志未酬。(不过没事,我已为各位卜上一卦,卦象显示各位都能挣钱...)...

4928
来自专栏一个会写诗的程序员的博客

Spring Reactor 项目核心库Reactor Core

Non-Blocking Reactive Streams Foundation for the JVM both implementing a Reactiv...

2192
来自专栏一个爱瞎折腾的程序猿

sqlserver使用存储过程跟踪SQL

USE [master] GO /****** Object: StoredProcedure [dbo].[sp_perfworkload_trace_s...

2070
来自专栏落花落雨不落叶

canvas画简单电路图

63311

扫码关注云+社区