- A+
所属分类：Web前端
一、表单标签焦点
<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> - 不点击输入输入框时的默认样式
- 点击了输入框之后
- 再点击其他空白处的时候
二、对上传文件进行格式筛选
<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后缀的
- 上传一张图片1.jpg
三、源码：
- 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 - 欢迎关注微信
