blur - 離開焦點時進行事件觸發

Posted on In

「表單中，文字欄位的內容」，也可以綁定一些事件

延續前面章節中，計算機的範例

html:

1
2
3
4
5
6
7
8
<div class="wrap">
    <div class="wrap-inner">
        <h1>六角西餐廳 - 顧客點餐篇</h1>
        <p>服務生：Hello，請問您想要點什麼？</p>
        <p> 顧客：給我 <input type="text" id="hamNumId"> 個漢堡，再 <input type="text" id="cokeNumId"> 杯可樂吧！</p>
        <p>服務生：<input type="button" id="countId" value="計算中">，好的，總計是 <em id="totalId" class="tag"></em> 元</p>
    </div>
</div>

css:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
html{
    background: #000;
    font-family: MicrosoftJhengHeiRegular;
}
*,*:before,*:after{
    box-sizing: border-box;
}
.wrap{
    background: url(https://i.ibb.co/cb2QRzR/desktop.png) 50% 50%;
    max-width: 1049px;
    height: 420px;
    margin: 200px auto;
    padding-top: 50px;
}
.wrap-inner{
    background: rgba(0,0,0,.65);
    margin: 0 auto;
    width: 600px;
    color: #fff;
    padding: 50px;
}
.wrap-inner h1{
    text-align: center;
    font-size: 36px;
    margin-bottom: .5em;
}
.wrap-inner p{
    font-size: 16px;
    line-height: 24px;
}
.wrap-inner .tag{
    color: yellow
}
.wrap-inner input[type=text]{
    width: 30px;
}

JS:

1
2
3
4
5
6
7
8
9
10
11
function count(){
    var hamPrice = 50;
    var cokePrice = 20;
    var hamNum = parseInt(document.getElementById('hamNumId').value);
    var cokeNum = parseInt(document.getElementById('cokeNumId').value);
    var total = (hamNum*hamPrice) + (cokeNum*cokePrice);
    document.getElementById('totalId').textContent = total;
}

var el = document.getElementById('countId');
el.addEventListener('click',count,false);

😢 當「欄位沒有填寫」時，user 按下「計算中」按鈕，就會出現「NaN」–> 這不是我要的結果

‼️ 「NaN」代表：數字計算錯誤

離開焦點時，“欄位空白”就跳出 alert

💡 我「點擊欄位」時，欄位是「focus 狀態」

我想要做的功能是：

當我「離開欄位」時（讓欄位離開“focus 狀態”），如果「欄位空白」的話，就會跳出提醒訊息「此欄位不可為空」

先介紹一下，什麼是「focus事件、blur事件」

focus事件、blur事件

💡 「focus事件」：所在焦點

🎃 當滑鼠「點擊到欄位內」時–> 會產生「focus事件」

💡 「blur事件」：取消焦點

🎃 當滑鼠「取消焦點」時（離開欄位）–> 就會觸發「blur事件」

JS 作法如下：

💡 blur事件

以「#hamNumId」做說明：

🎃 在#hamNumId做事件監聽–> 監聽「blur事件」

🎃 當觸發「blur事件」時，就會執行「checkContent這個 function」

💡 function checkContent(e){}

🎃 建立變數str，來撈出「當下點擊的文字欄位的“value”值」

🎃 用if來寫條件：如果「“value”值是空的」，就會執行「alert('此欄位不可為空');」

JS:

1
2
3
4
5
6
7
8
9
10
11
12
function checkContent(e){
    var str = e.target.value;
    if(str == ''){
        alert('此欄位不可為空');
    }    
}

var ham = document.getElementById('hamNumId');
ham.addEventListener('blur',checkContent,false);

var coke = document.getElementById('cokeNumId');
coke.addEventListener('blur',checkContent,false);

😄 JS 程式碼寫完了！

我「離開焦點」時，如果欄位內是空的，就會跳出alert('此欄位不可為空');

完整 JS 程式碼：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
function count(){
    var hamPrice = 50;
    var cokePrice = 20;
    var hamNum = parseInt(document.getElementById('hamNumId').value);
    var cokeNum = parseInt(document.getElementById('cokeNumId').value);
    var total = (hamNum*hamPrice) + (cokeNum*cokePrice);
    document.getElementById('totalId').textContent = total;
}

var el = document.getElementById('countId');
el.addEventListener('click',count,false);


function checkContent(e){
    var str = e.target.value;
    if(str == ''){
        alert('此欄位不可為空');
    }    
}

var ham = document.getElementById('hamNumId');
ham.addEventListener('blur',checkContent,false);

var coke = document.getElementById('cokeNumId');
coke.addEventListener('blur',checkContent,false);

我的 codepen 範例

https://codepen.io/saffranwang/full/qBEPKEx