记录贴:那些年踩过的坑

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

表单提交不刷新页面

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

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

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

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

ie8 ajax请求无效

设置

1
$.support.cors = true

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

dataTables中文配置

1
2
3
4
5
6
7
8
9
10
"language"    : {
"paginate" : {
"next" : "下一页",
"previous": '上一页'
},
"lengthMenu": "显示 _MENU_ 条/页",
"info" : "共_TOTAL_条记录",
"infoEmpty" : "共0条记录",
"emptyTable": "没有查询到数据"
}

dataTables数据为空时报错

在配置columns时加上defaultContent:''

select默认选中第一个

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

checkbox的值

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

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

ie8设置固定定位和透明

1
2
3
4
5
6
7
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属性,需要写
    1
    $('input[disabled]').removeAttr('disabled');
  • readonly
    对于select生效,但是因为select本身就是readonly的,依旧可以改变所选项,如果希望select不可改变
    1
    2
    3
    4
    5
    $('select[readonly]').focus(function () {
    this.defaultIndex = this.selectedIndex;
    }).change(function () {
    this.selectedIndex = this.defaultIndex;
    })

input回车切换焦点

这里必须先吐槽一句了,你老老实实用Tab键不行么?我#¥!@#!

1
2
3
4
5
6
7
8
9
$('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……别问我为什么知道,我浏览器就是这么卡死的。

表单提交对象

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

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

git clone 403

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

1
2
3
https://[用户名]:[密码][地址]
//for example
https://liyu:[email protected]/gitliyu/gitliyu.github.io.git

事件委派的重复绑定

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

1
2
3
4
5
6
7
8
9
10
//对a链接添加点击事件
$('body').click(function(e){
if(e.target.tagName == 'A'){
...
}
})

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

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

1
$('body').unbind();

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

target和currentTarget

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

1
2
3
4
5
6
7
8
9
<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标签时,会分别输出

1
2
A
LI

富文本编辑器过滤标签

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

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

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

隐藏input number的按钮

1
2
3
4
5
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none !important;
margin: 0;
}

减法出现小数

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

1
console.log(171.2 - 85)   // 86.19999999999999

解决方法:

  • parseInt(), Math.Floor(), Math.Round()等方法取整,不常用
  • toFixed(2), 保留有效位数
  • 扩大倍数之后在进行减法计算,既然浮点型运算有问题,那就换成整型来计算
1
2
console.log((171.2 - 85).toFixed(1))	// '86.2'
console.log((171.2 * 10 - 85 * 10) / 10) // 86.2
文章目录
  1. 1. 表单提交不刷新页面
  2. 2. ie8 ajax请求无效
  3. 3. dataTables中文配置
  4. 4. dataTables数据为空时报错
  5. 5. select默认选中第一个
  6. 6. checkbox的值
  7. 7. ie8设置固定定位和透明
  8. 8. 设置表单不可选
  9. 9. input回车切换焦点
  10. 10. 表单提交对象
  11. 11. git clone 403
  12. 12. 事件委派的重复绑定
  13. 13. target和currentTarget
  14. 14. 富文本编辑器过滤标签
  15. 15. 隐藏input number的按钮
  16. 16. 减法出现小数
|