相关文章推荐

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

html:

<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>

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;
}

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('此欄位不可為空'); 」

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 程式碼：

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