02月20日 日常填坑 (一)
填坑专栏：
都是日常工作中遇到的一些细节问题，有时因为这些细节，导致花费大量时间排查问题，花了1个小时定位问题，但解决问题只用了10分钟，都是一些小细节，坑死人。所以在这里写一个专栏，纪录日常工作中遇到的一些坑。每一个坑都是自己工作中遇到的，然后解决了，纪录下来。
一是方便以后自己查阅，
二是大家如果也遇到这样的坑，可以交流。
这篇会有4个坑
1.display:none;导致的height()方法获取高度为0；
2.input标签，设置readonly，preventdefault()阻止默认事件。导致无法获取焦点，focus事件无法触发。
3.ios上微信浏览器title无法用document.title来修改（只有ios上无效，其他都可以）
4.mailto: e-mail在微信浏览器里无效，其他浏览器可以。
一：display:none;导致的height()方法获取高度为0；
吐槽：说到这个坑，坑了我将近1个小时，当时完全没有想到这里。
场景：
<!DOCTYPE html>
<html>
<head></head>
<body>
<div class="我的简历">
...
<div class="自我介绍">
<div id="介绍">这里放自我介绍</div>
<button type="button" id="展开/收起"></button>
</div>
<button type="button" id="修改"></button>
...
</div>
<div class="hide 自我介绍修改">
<div class="富文本">
这里是一个富文本，里面有好多内容，谁叫我优点多（自我感觉良好）。。。
</div>
<button type="button" id="保存"></button>
</div>
</body>
</html>
解说：
因为两个模块放在同一个html里面（产品层面：是两个页面），所以当我保存后，需要用js把修改后的内容更新，$('#介绍').html()，把副文本里的内容更新进去，嗯，搞定。
然后自我介绍内容太长了（手机端），需要一个展开／收起功能，默认max－height:200px;overflow:hidden；超过200px，才能把展开／收起的button显示，这样我就要需要判断自我介绍的height是多少了。
$('#介绍').height(),拿到高，判断展开／收起的button是否显示，然后在hide->$('.自我介绍修改),show->$('.我的简历'),思路无懈可击，啪啪啪（这里是敲键盘），深吸一口气，我擦，什么情况，$('#介绍').height() ＝ 0，我擦，不可能啊，不科学啊，那么多内容，怎么会是零。因为我在$('#介绍').height()拿高的时候，$('.我的简历')还是hide状态，document里面肯本就没有，display:none;后，对象不占用任何空间。
结果：
先把show->$('.我的简历'),再$('#介绍').height()拿高，最后判断展开／收起的button是否显示。
扩展：visibility:hidden 与 display:none的区别。
二：input标签，设置readonly,preventdefault()阻止默认事件,导致无法获取焦点，focus事件无法触发。
吐槽：这个坑还好，注意一下就行。
场景：校验的时候，有空未填字段，我就要给提示，获取光标后去掉错误提示，input都用事件focus，发现有一个input就没反应，你还高贵点咯，无动于衷。
解说：因为它加了一个readonly属性，是一个下拉组件，并用preventdefault()阻止了它的默认事件，这样的好处是，input里面不会有光标了，也不会弹出虚拟键盘，但也导致focus事件无效，
结果：只能把它换成click事件了
扩展：html中input只读属性readonly与disable的区别
三：ios上微信浏览器title无法用document.title来修改（只有ios上无效，其他都可以）
场景：这个就是第一个坑的时候，发现的，我在修改“我的介绍”的时候，直接用doucment.title=“修改简历”;发现在ios上无效。
结果：直接贴代码了（内嵌一个iframe去发起一个请求来触发IOS设备中更新title）
function editBrowserTitle(title){
var isIOS = /iPad|iPhone|iPod/i.test(navigator.userAgent);//判断设备
if (isIOS) {
var $body = $('body');
document.title = title;
var $iframe = $('<iframe src="/favicon.ico" style="display:none;"></iframe>');
$iframe.on('load',function() {
setTimeout(function() {
$iframe.off('load').remove();
}, 0);
}).appendTo($body);
} else {
document.title = title;
}
}
四：mailto: e-mail在微信浏览器里无效，其他浏览器可以。
解说：这个就是有一个需求，想要直接在页面里（前端）发送邮件，然后找到
<a href="mailto:name@email.com">Email</a>,一测试，在微信里面没用，用浏览器都可以。
扩展：http://www.cnblogs.com/LiveWithIt/p/5937049.html
http://www.haorooms.com/post/mailto_link_html
