发表于: 2018-08-29 23:56:58

1 658


完成的事情:

重新规范了任务4的代码。昨天完成的输入框做到了限制非数字字符的输入,但是切换到输入法的时候就会失效,在只用html和css的情况下使用给input使用number可以做到只能允许数字的输入,但是maxlength 属性会失效无法做到现在输入字符数,最后查到了正则表达式的代码达到了效果,但是自己没能了解原理。

<script>

function replacenltnumber(hehe) {

 var pattern = /[^0-9]/g;

if (pattern.test(hehe.value)) {

hehe.value = hehe.value.replace(pattern, "" );

}

}

 看过了css的书写规范,书写顺序应按照功能进行分组,并以 formatting model 布局方式,位置 >box model  尺寸> typographic 文本相关 > visual 视觉效果的顺序进行书写。

明天计划的事情:

css的书写规范还需要继续阅读理解,完成任务5的布局,学习更多背景background的相关属性。


遇到的困难:

在使用css样式对input进行控制的时候始终找不到一个可以在限制数字字符以外的输入的情况下,限制字符数。限制非字符输入没有做到对QQ浏览器很好的兼容。


收获:

通过对任务四使用felx 和psutuin两种不同的方式进行布局,更加清楚的理解了两者之间的不同,position属性对某些特殊布局很方便,垂直居中不容易实现,但是可以做到任务四头部三块文字去掉其中的任意一个,其他的文字块都可以保持原为,使用felx的justify-content属性的space-between值做到两端对齐,两目之间的间隔都相等,在一行有三个子元素的时候可以很轻松的做到“关闭”和“注册”在两端,“登陆”在中间,但又无法做到在去掉其中一个元素的时候位置保持不变。




返回列表 返回列表
评论

    分享到