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 条评论
登录 后参与评论

相关文章

来自专栏老脸一黑

go 并发处理脚本

最近经常涉及到脚本的编写。本身项目数据量较大,所以经常编写的脚本需要高并发,干脆就提取出来。

52626
来自专栏web前端教室

[视频直播]本周日先行者视频“React多级菜单

第一个知识点,就是递归。 递归往简单了说,就是函数不断调用自身,同时设定一个退出条件,达成条件就结束调用自身,否则就成无限递归了。 看一小段JSON: { ...

2099
来自专栏李智的专栏

Emmet插件使用教程

891
来自专栏Golang语言社区

Go语言的os包中常用函数初步归纳

1)os.Getwd函数原型是func Getwd() (pwd string, err error) 返回的是路径的字符串和一个err信息,为什么先开这个呢?...

3439
来自专栏Golang语言社区

Go语言的os包中常用函数初步归纳

1)os.Getwd函数原型是func Getwd() (pwd string, err error) 返回的是路径的字符串和一个err信息,为什么先开这个呢?...

3247
来自专栏河湾欢儿的专栏

Vue.js基础特性

计算属性 computed 与data,el,methods属性一样,都是vm实例的属性(选项) 理解其大致意思即可

1031
来自专栏吴裕超

认识createDocumentFragment

今天在看vue源码解析时候发现一个api没有见过,一查是原生的,赶紧补漏。 DocumentFragments 是DOM节点。它们不是主DOM树的一部分。通常的...

2677
来自专栏ytkah

{dede:list}和{dede:arclist}的区别

1.{dede:list}是用于列表页的文章列表调用,通常是用于list_article.htm页面,这个文章列表是可以分页的。 功能说明:表示列表模板里的分...

3356
来自专栏LIN_ZONE

Vue 中动态添加class(使用v-bind:class)

今天在Vue中动态修改类名,元素的样式就是不改变,类名也没有加上去,里面的问题具体我还是不太清楚,有可能是因为自己不认真,把 :class= 后面的内容的格式给...

3542
来自专栏向治洪

深入理解React Native页面构建渲染原理

前言 React Native 是最近非常火的一个话题,因为它的语法简介,跨平台等特性,赢得了各大平台的青睐,虽然前期是有一些坑。 基本概念解释 React 是...

53010

扫码关注云+社区