用Javascript實現點選input輸入框後輸入框的提示文字消失,並且邊框顏色發生變化（包含input框的password型別如何顯示提示文字）

阿新 • • 發佈：2021-01-29

用Javascript實現點選input輸入框後輸入框的提示文字消失。並且邊框顏色發生變化（包含input框的password型別如何顯示提示文字）

正在學習大前端中，有程式碼和思路不規範不正確的地方往多多包涵，感謝指教

功能一

在很多現實案例中，登陸或者註冊頁面裡面的輸入框裡面會有一些提示資訊，然後點選輸入框進行輸入內容時，這些提示文字則消失。
下面用程式碼來實現

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset= 
"UTF-8">
    <title>Title</title>
    <style>
        .InputArea{
            width: 800px;
            height: 100px;
            border: 1px solid black;
        }
        .btn{
            background-color: cadetblue;
            color: #cccccc;
        }
        input{
            border: 
 1px solid #999;
            color: #999;
            outline: none;
        }
    </style>
</head>
<body>
    <div class="InputArea">
        <input class="Text" type="text"value="郵箱/ID/手機號">
        <input class="Password" 
 type="text" value="密碼">
        <button class="btn">登陸</button>
    </div>
    <script>
        var text=document.querySelector('.Text')
        var pass=document.querySelector('.Password')
        text.onfocus=function () {
            if (this.value==='郵箱/ID/手機號'){
                this.value=''
                this.style.border='1px solid red'
            }else {
                this.style.border='1px solid #999'
            }
        }
        text.onblur=function () {
            if (this.value===''){
                this.value='郵箱/ID/手機號'
                this.style.border='1px solid #999'
            }else {
                this.style.border='1px solid #999'
            }
        }
        pass.onfocus=function () {
            if (pass.value==='密碼'){
                this.value = ''
                this.type = 'password'
                this.style.border = '1px solid red'
            }else {
                this.type = 'password'
                this.style.border = '1px solid red'
            }
        }
        pass.onblur=function () {
            if (pass.value==='') {
                this.type = 'text'
                this.value = '密碼'
                this.style.border = '1px solid #999'
            }else {
                this.style.border = '1px solid #999'
            }
        }
    </script>
</body>
</html>

功能二

上面的程式碼同時也實現了input的密碼輸入框如何顯示提示文字，然後點選輸入框過後又正常顯示*的功能

程式碼解釋

先解釋功能一吧，這裡的的核心是用到了JS中的onfocus（獲得焦點）和onblur（失去焦點）。
這裡就是使用者點選輸入框想要輸入內容時，觸發了input框的onfocus，獲得了焦點過後邊執行相應的函式（就是把input輸入框的value值變為了空‘ ’，這樣就可以達到點選輸入框，輸入框的提示文字消失的功能）當然，為了美觀，我這裡還對輸入框的邊框顏色進行了改變。但是在測試的時候，輸入框卻沒有變為我想要的顏色，我就對其樣式進行設定，將其outline（外邊框）值設為‘none，這樣他的外邊框就不會顯示，當然也可以修改外邊框的顏色來達到這樣的效果。
然後就是失去焦點，使用者點選輸入框外的區域，則觸發了失去焦點事件，便執行函式，把value值還原為之前的提示文字，邊框值也設值回去。

接下來是功能二，功能二的核心是改變type，我們都知道，當input的型別為password時，value值（提示文字）將會顯示為********，這樣就達不到提示使用者的效果了，所以還是要提示使用者滴！
這裡同樣是用了獲得焦點和失去焦點。
我們給密碼的input設定了初值為text，為的是讓這個頁面一刷新出來，使用者看見的是提示文字。然後使用者如果點選輸入框，那麼提示文字就會消失，隨即輸入密碼則顯示密碼為***

注意

這裡為了不發生這種情況：使用者輸入了資訊然後在進行其他操作導致輸入框的輸入資訊被變成空/提示文字。我在這些焦點事件的執行函式裡面添加了判斷條件，如果輸入了資訊就不會對輸入框的內容（value）值進行改變，只改變輸入的顏色，讓使用者知道自己的輸入游標是否在輸入框內，是否可以直接輸入資訊。

演示效果：

未操作時

在這裡插入圖片描述

點選使用者名稱框/密碼框時

在這裡插入圖片描述

輸入資訊過後點選其他地方時

在這裡插入圖片描述

輸入密碼後點擊其他地方

在這裡插入圖片描述

別噴我，寫的不好就勞煩指點一二，覺得有幫助就留下個大拇指點個關注再走哈哈哈！

用Javascript實現點選input輸入框後輸入框的提示文字消失,並且邊框顏色發生變化（包含input框的password型別如何顯示提示文字）