# 網頁虛擬鍵盤應用

#### 相關連結： [Codepen](https://codepen.io/liu_0821/pen/xxmbOpq)、 [Medium](https://medium.com/@LindaLiu0821/%E8%99%9B%E6%93%AC%E9%8D%B5%E7%9B%A4%E6%87%89%E7%94%A8-a7ed3e6a2dd5)

## 部分HTML

<!-- IPAD造型 -->
<div class="ipad">
    <div class="powerBtn"></div> 
    <div class="lens"></div>
    <div class="screen">
      <input class="text" type="text" placeholder="請輸入">
    </div>
    <div class="middleBtn"></div>
    <div class="soundsource big"></div>
    <div class="soundsource small"></div>
</div>
<!-- 虛擬鍵盤 -->
<div class="keyboard" id="keyboard">
    ...
</div>

## 部分CSS
- CSS內容只說明比較特別的樣式

/*-------- 改變input placeholder 的文字顏色 --------*/
.text::placeholder {
  color: #fff;
}

## JavaScript
- 當點擊鍵盤按鍵處理相關事件

$(".text").on('input', (e) => {
    sessionText = $(e.target).val();
});
$.each($('.keyboard').find('.keys'),(i,dom)=>{
  $(dom).click((e)=>{
     // 判斷點擊哪個按鈕去進行函式
    if($(e.target).text().includes("BackSpace")){
      sessionText = sessionText.slice(0, -1);
       $('.text').val(sessionText)
    }else if($(e.target).text() == "空白"){
      sessionText = sessionText +" ";
      $('.text').val(sessionText)
    }else if($(e.target).text().includes("Shift")){
      if($(e.target).find('i').attr('class') == "bi bi-arrow-up-circle-fill")       {
         $(e.target).find('i').attr('class','bi bi-arrow-up-circle');
         runHtml('小')
      }else{
        $(e.target).find('i').attr('class','bi bi-arrow-up-circle-fill');
        runHtml('大')
      }
    }else{
      sessionText = sessionText + $(e.target).text() ;
      $('.text').val(sessionText)
    }
  });
});

#### 切換大小寫
- 透過下面的函式判斷是否要切換大小寫 `空白`

function runHtml(text){
  let DomText;
  $.each($('.keyboard').find('.keys'),(i,dom)=>{
    if($(dom).text().includes("Shift") || $(dom).text().includes("BackSpace") ){
        return;
      }else{
        if(text == "大"){
          DomText = $(dom).text().toUpperCase();
          $(dom).text(DomText);
        }else{
          DomText = $(dom).text().toLowerCase();
          $(dom).text(DomText);
        }
        
      }
  });
} 

---

##### ヽ(∀ﾟ )人(ﾟ∀)人( ﾟ∀)人(∀ﾟ )人(ﾟ∀)人( ﾟ∀)ﾉヽ(∀ﾟ )人(ﾟ∀ﾟ)人( ﾟ∀)人(∀ﾟ )人(ﾟ∀ﾟ)人( ﾟ∀)人(∀ﾟ )人( ﾟ∀)人

##### 以上 如果註解哪裡有錯誤或有問題，歡迎提出來一起討論~~~~