一、表單標簽焦點
<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 - 歡迎關注微信公眾號：傅里葉變換，個人賬號，僅用于技術交流
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/155606.html
標籤：JavaScript