[技術博客] 在前端工做中的一些技巧

HTML檢測輸入已完成

• 先看一下代碼的實現：

<tbody>
    <tr style="background-color:#FfFFFF">
        <th colspan="2" class="info">物理填空題:</th>
    </tr>
    <tr style="background-color:#F3F3F3">
        <th>題目:</th>
        <td>
            <input class="form-control" onBlur="finnishInput(event)" "onInput(event)" id="question" onporpertychange="onChange(event)" type="number" placeholder="">
        </td>
    </tr>
    <tr style="background-color:#FFFFFF">
        <th>答案:</th>
        <td>
            <input class="form-control" id="answer" type="number" placeholder="">
        </td>
    </tr>
</tbody>

• 其中的JS代碼:

var flag = 0;
function onInput(e){
  console.log("Inputing");
  flag = 1;
}
 
function finnishInput(e) {
  if(1 == flag){
    console.log("InputOk");
    flag = 0;
  }
}

• 邏輯說明：
  1.使用"onInput(event)"檢測是否在輸入
  2.使用onporpertychange="onChange(event)"檢測是否內容發生改變
  3.使用onBlur="finnishInput(event)"檢測是否失去焦點

這樣就能夠判斷題目有沒有輸入啦，能夠提醒用戶先輸入題目後才能輸答案。

另外補充一個以前工做的小技術

• 點擊一個按鈕變色，其餘按鈕不變色，代碼以下：

<table> 
<tr>
                <td>
                    <input class="flag A" type="submit" onclick="dj(this);" value="A" />
                </td>
                <td>
                    <input class="flag B" type="submit" onclick="dj(this);" value="B" />
                </td>
                <td>
                    <input class="flag C" type="submit" onclick="dj(this);" value="C" />
                </td>
                <td>
                    <input class="flag D" type="submit" onclick="dj(this);" value="D" />
                </td>
            </tr>
        </table>

• JS以下：

<script type="text/javascript">
    $(function () {
    //加載事件
        var collection = $(".flag");
        $.each(collection, function () {
            $(this).addClass("start");
        });
    });
    //單擊事件
    function dj(dom) {
        var collection = $(".flag");
        $.each(collection, function () {
            $(this).removeClass("end");
            $(this).addClass("start");
        });
        $(dom).removeClass("start");
        $(dom).addClass("end");
    }
</script>