一、表单标签焦点
<input type="text" placeholder="请输入姓名">
<script>
window.onload = function (ev) {
var input = document.getElementsByTagName("input")[0];
//1.获得焦点,也就是按下鼠标的那个光标
input.onfocus = function (ev1) {
//this是一个指针用于指向变量
this.style.width = '600px';
this.style.height = '40px';
this.style.outline = 'none';
this.style.fontSize = '20px';
}
//2.失去焦点
input.onblur = function (ev2) {
this.style.border = '10px solid red';
this.style.height = '40px';
}
}
</script>
- 不点击输入输入框时的默认样式
![36.1](https://img-blog.csdnimg.cn/20201004180236216.png#pic_center)
- 点击了输入框之后
![36.2](https://img-blog.csdnimg.cn/2020100418025461.png#pic_center)
- 再点击其他空白处的时候
![36.3](https://img-blog.csdnimg.cn/2020100418031467.png#pic_center)
二、对上传文件进行格式筛选
<label for="">上传图片:</label>
<input type="file" id="file"><!--file就是上传文件的按钮-->
<!--jpg png gif 格式的图片才能上传-->
<script>
window.onload = function (ev) {
//1.获取标签
var file = document.getElementById("file");
//2.监听作用域的变化
file.onchange = function (ev2) {
console.log("上传文件了");
//2.1获取用户上传文件的内容
var path = this.value; //this.value就是上传文件的地址
//2.2截取
var suffix = path.substr(path.lastIndexOf('.'));//字符串操作函数substr,一个参数代表那那里截取到最后的字符
//lastIndexOf()最后某个字符的索引值
console.log(suffix);
//2.3大小写转换一下
var lowerSuffix = suffix.toLowerCase();//转换成小写
//2.4判断
if(lowerSuffix === ".jpg" || lowerSuffix === '.png' || lowerSuffix === '.gif'){
alert("上传成功");
}else{
alert("上传格式不正确,只能jpg\png\gif");
}
}
}
</script>
- 上传一个文件不是.jpg.png.gif后缀的
![36.4](https://img-blog.csdnimg.cn/20201004193148468.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYzMDA1MA==,size_16,color_FFFFFF,t_70#pic_center)
- 上传一张图片1.jpg
![36.5](https://img-blog.csdnimg.cn/20201004193236803.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYzMDA1MA==,size_16,color_FFFFFF,t_70#pic_center)
三、源码:
- D36_1_CommonAffairOfInputLable.html
- D36_2_FormatVerificationOfUploadingImage.html
- 地址:
https://github.com/ruigege66/JavaScript/blob/master/D36_1_CommonAffairOfInputLable.html
https://github.com/ruigege66/JavaScript/blob/master/D36_2_FormatVerificationOfUploadingImage.html
- 博客园:
https://www.cnblogs.com/ruigege0000/
- CSDN:
https://blog.csdn.net/weixin_44630050?t=1
- 欢迎关注微信公众号:傅里叶变换,个人账号,仅用于技术交流
![911](https://img-blog.csdnimg.cn/20200809233047145.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYzMDA1MA==,size_16,color_FFFFFF,t_70)