實作需求：
1）輸入框獲得焦點，提示內容消失，邊框過渡影片變色
2）輸入框失去焦點，如果內容為空，提示內容恢復，邊框變色；如果內容不為空，只有邊框過渡影片變色
<input type="text" value="https://www.cnblogs.com/MaricoCheung/p/郵箱/ID/手機號" style="font-family:-apple-system, sans-serif; color: #999; outline: none; border: 1px solid #eee; transition: .5s ease;" />
<script>
var loginName = document.querySelector('input'); // 獲取元素loginName
loginName.onfocus = function() { // 獲得焦點事件 onfocus
if (this.value =https://www.cnblogs.com/MaricoCheung/p/=="郵箱/ID/手機號") {
this.valuehttps://www.cnblogs.com/MaricoCheung/p/= '';
}
this.style.border = '1px solid #ffd6db';
}
loginName.onblur = function() { // 失去焦點事件 onblur
if (this.value =https://www.cnblogs.com/MaricoCheung/p/=='') {
this.valuehttps://www.cnblogs.com/MaricoCheung/p/= '郵箱/ID/手機號';
}
this.style.border = '1px solid #eee';
}
</script>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/168463.html
標籤：JavaScript
下一篇：JS原生練習