[技术博客] 在前端工作中的一些技巧

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>