发表于 | 分类于

今天要修复一个小bug，当发生点击事件，会显示表单，要让表单内部的input自动获得焦点。
我想当然给表单控件设置了autofocus属性，然而，没有生效。
查看了下mdn的信息：

autofocus HTML5
This Boolean attribute lets you specify that a form control should have input focus when the page loads, unless the user overrides it (e.g. by typing in a different control). Only one form element in a document can have the autofocus attribute, which is a Boolean. It cannot be applied if the type attribute is set to hidden (that is, you cannot automatically set focus to a hidden control). Note that the focusing of the control may occur before the firing of the DOMContentLoaded event.

为何我的修改没有效果？
因为我的页面列表是ajax请求数据生成的，而autofocus是在页面加载的时候就确定一个表单控件是否获取焦点。

Note that the focusing of the control may occur before the firing of the DOMContentLoaded event.

我的input标签是在页面加载完成之后才添加到dom中的;所以设置的autofocus没有生效。
最后还是老老实获取表单元素，添加focus事件。

发表于 | 分类于

使用百分比构建固定比例布局

移动端：1:1 头图

1
2
3
div{
	padding:50%;
}

配合margin实现等高布局

很大的margin-bottom,padding-bottom值填充缺失的空间。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.box{
	overflow:hidden;
	resize:vertical;
}
.child-orange,child-green{
	margin-bottom:-600px;padding-bottom:600px;
}
.child-orange{
	float:left;
	background-color:orange;
}
.child-green{
	float:left;
	background-color:green;
}

两栏自适应布局

padding在容器上

1
2
3
4
5
6
7
8
<div class="pbox">
	<img src="xx.jpg"> text here Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
1
2
3
4
5
6
7
.pbox{
	padding-left:120px;
}
.pbox img{
	float:left;
	margin-left:-120px;
}

padding在子元素上

1
2
3
4
5
6
7
8
9
<div>
	<img src="xx.jpg">
	<div class="auto">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
1
2
3
4
img{float:left;}
.auto{
	padding-left:120px;
}

内容参考来自张鑫旭的慕课网视频：(http://www.imooc.com/video/12600).