记录贴:那些年踩过的坑

记录一下遇到的问题和解决方法，我有预感，这一篇会很长。

表单提交不刷新页面

<form id="myForm" method="post" target="formsubmit">
	……
</form>
<iframe name="formsubmit" class="hide"></iframe>

form表单提交到iframe里面处理，而这个iframe是隐藏的，所以提交表单的时候当前页面没有发生任何变化。form的target属性指向iframe的name值，这样就实现了提交到隐藏的iframe中。
提交时使用js提交

$('#myForm').attr('action', url).submit();

也可以通过设置target=”_blank”在新页面提交表单

ie8 ajax请求无效

设置

$.support.cors = true

$.support.cors判断浏览器是否支持跨域访问，在ie8中默认值是false，需要手动开启

dataTables中文配置

"language"    : {
    "paginate"  : {
        "next"    : "下一页",
        "previous": '上一页'
    },
    "lengthMenu": "显示 _MENU_ 条/页",
    "info"      : "共_TOTAL_条记录",
    "infoEmpty" : "共0条记录",
    "emptyTable": "没有查询到数据"
}

dataTables数据为空时报错

在配置columns时加上defaultContent:''

select默认选中第一个

$("select option:first").prop("selected", "selected");

checkbox的值

checkbox不能通过val()拿到值，需要判断checked属性

$('input[type="chekcbox"]').attr('checked', true)	//选中
$('input[type="chekcbox"]').removeAttr('checked')	//取消选中

ie8设置固定定位和透明

position: fixed;
_position: absolute;
_clear: both;
_top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop   +(documentElement.clientHeight-this.clientHeight) - 1   : document.body.scrollTop   +(document.body.clientHeight-this.clientHeight) - 1);

opacity: 0;
-ms-filter:"alpha(opacity=0)";

设置表单不可选

表单元素自带的有两个属性readonly和disabled，都可以设置内容无法改变

• disabled

1. 在ie9以下浏览器中，字体颜色会变得十分浅，只能用readonly
2. 设置disabled,disabled="true"和disabled="false"都会生效，所以想要取消disabled属性，需要写

   $('input[disabled]').removeAttr('disabled');

• readonly
  对于select生效，但是因为select本身就是readonly的，依旧可以改变所选项，如果希望select不可改变

  $('select[readonly]').focus(function () {
      this.defaultIndex = this.selectedIndex;
  }).change(function () {
      this.selectedIndex = this.defaultIndex;
  })

input回车切换焦点

这里必须先吐槽一句了，你老老实实用Tab键不行么?我#￥！@#！

$('body').on('focus', 'input', function () {
    var input = $('input');
    input.unbind('keydown');
    input.keydown(function (ev) {
        if (ev.keyCode == 13) {
            input.eq(input.index(this) + 1).focus();
        }
    })
});

因为有动态生成的input标签，所以这里把事件绑在了body上，focus时获取所有input的对象集合，回车切换到下一个。

在绑定keydown事件之前一定要先解绑，不然会重复绑定，然后执行2，4，8，16……别问我为什么知道，我浏览器就是这么卡死的。

表单提交对象

$('input').val(JSON.stringify({a:1})

数组在赋值的时候会自动转化成字符串 [1,2,3] => 1,2,3，对象直接赋值会显示object，需要转换一下格式，跟localStorage一个道理，后台拿到字符串后转为JSON格式即可。

git clone 403

git clone和push的时候碰到403的错误，用户权限不足，，在地址前加上用户名跟密码即可

https://[用户名]:[密码][地址]
//for example
https://liyu:123@github.com/gitliyu/gitliyu.github.io.git

事件委派的重复绑定

在使用jquery对于一些动态生成的dom元素进行事件绑定时，通常需要绑定在父级上进行委派，常用的方法

//对a链接添加点击事件
$('body').click(function(e){
    if(e.target.tagName == 'A'){
        ...
    }
})

$('body').on('click', 'a', function(){
    ...
})

第二种方式当然是没有问题的，在使用第一种方式时，由于比较懒，直接把事件绑在了body而非父级上，在页面局部刷新时(jquery load或pjax)，由于body没有刷新而模板页的js文件重新执行，会出现事件重复绑定,需要在每次绑定事件前解绑

$('body').unbind();

感觉这个问题出现的太过巧合，除了我估计也没人遇到了

target和currentTarget

以点击事件为例，target指的是点击的dom对象，可以用来委派事件&判断点击对象，currentTarget指的是所点击的绑定该点击事件的dom对象，防止事件冒泡和默认事件的组织。
举个栗子：

<li onclick="fn(e)">
    <a href="###">link</a>
</li>
<script type="text/javascript">
    function fn(e){
        console.log(e.target.tagName);
        console.log(e.currentTarget.tagName);
    }
</script>

在以上代码中，点击a标签时，会分别输出

A
LI

富文本编辑器过滤标签

在使用富文本编辑器时，为了保留格式，直接使用v-model取得的value值都带有html标签，在项目中使用到的vue-quill-editor，虽然有提供获取纯文本的方法，但是默认的返回值为”\n”，一个换行符，并且仍然会有部分标签，无法进行非空判断。
解决方法：

text = text.replace(/(<[^>]*>|<\/[^>]*>|\s+)/gm, '');

过滤掉字符串中的html标签和空格

隐藏input number的按钮

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0;
}

减法出现小数

js对于浮点型不够准确，因此在计算浮点数的减法时经常出现问题

console.log(171.2 - 85)   // 86.19999999999999

解决方法：

• parseInt(), Math.Floor(), Math.Round()等方法取整，不常用
• toFixed(2), 保留有效位数
• 扩大倍数之后在进行减法计算，既然浮点型运算有问题，那就换成整型来计算

console.log((171.2 - 85).toFixed(1))	// '86.2'
console.log((171.2 * 10 - 85 * 10) / 10)	// 86.2