工作随手笔记

1. 移动端input placeholder垂直不居中。
   移动端输入框的placeholder文字仔细看并非完全垂直居中，网上说要设置行高，但是我设置了行高等于input的高度后，在手机上输入文字时，闪动的焦点线的高度跟input高度一样看起来很奇怪。看了一下淘宝和京东得到了解决方案：先把input的样式做到另外一个div上面，然后把input定位到到这个div里面让它上下居中。
   20171227更新：后面发现，把行高设置为某个定值，这个定值不能跟font-size一样大，要比font-size大一点，例如，font-size为14px，行高设置为20px，就可以居中。

2. -webkit-overflow-scrolling: touch
   移动端页面overflow:scroll很卡，使用-webkit-overflow-scrolling: touch会让滚动变得很流畅。

3. 关于三行等高
   今天在做8000这个项目时，遇到了一个问题：三行内容均未确定高度（自适应），三行需要等高且有边框。之前看过一篇文章有很多种方案但是不太记得了。今天我自己想到了一种方案：父级的背景从左到右用渐变色，父级设置上下左右边框，中间三行内容的分割边框用给父级分别添加before和after伪类来实现。

4. prop()和attr()
   关于jq的prop()方法，它是添加隐式属性，即添加的属性不会新增到dom中，而attr()添加的属性会新增到dom中。这样可以避免用户操作dom来改变一些东西。特别注意：表单input添加checked属性使用attr()无效，要用prop()才行。

5. user-select: none;
   这个属性是指，用户不能选择元素中的任何内容（一般情况下我们用鼠标双击或手机端长按可以选中文字或图片，这个属性能禁止选中）

6. 仅针对chrome的hack：

@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
        /* 这里是样式 */
    }

7. 今天在项目中写递归，是用到树形图中。假如某个input是该文件夹唯一一个选中的元素，当取消选中它时，它的所有父级全部要取消选中，这时就要用到递归，思路为：创建一个函数为取消选择，先取消选中父级，然后调用函数本身，以父级为基准再次取消选中父级，循环调用直到父级不存在为止。

   
   
   

   image.png

8. 关于当输入框在最底部的时候，弹起的虚拟键盘会把输入框挡住的解决方法：
   https://github.com/justjavac/the-front-end-knowledge-you-may-dont-know

9. 弹性盒模型布局：手淘首页在用的

// 只需要给父级选择器加，子级选择器不需要添加任何盒模型属性
.parent-selector{
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
}

10、排除某个元素添加事件，not选择器

$(document).on('mouseenter','.navbar li:not([data-mask="hover"])',function(){
   $('.mask-cover').fadeOut(100);
});

11、oninput事件
oninput事件是表单（例如input）里面的值发生变化时触发。

12、如何让浏览器直接下载而非预览pdf文件？

貌似不兼容IE8

13、IOS浏览器的window、document、body并不接受click事件，按钮和链接才接受click事件。所以，在做弹窗时，想要实现点击任意位置弹窗消失，需要这样写：

$('body>*').on('click',function(){
   // code here!
});

14、移动端active伪类无效的解决方法：
需要在按钮元素或body/html上绑定一个touchstart事件才能激活:active状态。
只需要在body元素上写：