发表于: 2019-02-23 22:16:35
1 921
一、今天完成的事情:
(一)input宽度改成80%,数字input默认有上下小箭头,找到了把他们去掉的方法。
(二)把手机号数字长度的输入限制改好了,把密码隐藏和长度限制改好了。
(三)学会用git退回以前的版本,用到了手动解决冲突,需要合并分支。
(四)比较好奇现在用了这些布局方式的区别,查了一下:
flex可以轻松实现,但是float和position难以灵活实现的这些效果:
- 垂直居中一个块/让所有子元素占用等量的宽高/使多列布局中的所有列采用相同的高度。
- 但是float的好处是兼容老的ie。
二、明天计划的事情:
做任务4深度思考和任务5
三、遇到的问题:
(一)输入手机号需要限制2个条件:1)必须是数字,2)长度11
错误的尝试:1 首先想到的是type = number,maxlength = 11,但是maxlength对number不起效。2 然后试了用type = number,max=99999999999,这也不行,它并不在输入期间进行做限制。(还会弹出奇妙的提示).3 input有一个pattern参数可以用正则表达式,但是是在提交之后才会有提醒。
解决方法:咨询了一下师兄,用oninput+text maxlength
oninput 内部怎么实现的:oninput 事件在用户输入时触发(在 <input> 或 <textarea> 元素的值发生改变时触发),之后oninput里面函数就开始运行
value=value.replace(/[^\d]/g,' ')
引号里面是用户输入的内容,匹配上正则表达式的部分会被传给value,最后显示在输入框里
另外onchange和他类似,不同之处在于 oninput 事件在元素值发生变化时立即触发, onchange 在元素失去焦点时触发。
比起那些错方法,只有oninput是在做输入动作的时候进行限制,其他都是输入动作结束之后才给反馈。
收获
了解了input
了解了几种布局的区别
评论