JS開發步驟學習筆記

nt1979發表於2021-09-09
JS筆記


確定事件

事件要觸發函式: 定義函式

函式通常都要去做一些互動: 點選, 修改圖片, 動態修改innerHTML屬性可以編寫程式碼... innerTEXT() 不能編寫程式碼

表單校驗中常用的事件:

獲得焦點事件: onfocus

失去焦點事件  onblur

按鍵抬起事件:  onkeyup

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <!--

            確認事件

            事件觸發函式

            函式操作元素

            校驗使用者名稱

                1. 當使用者滑鼠移動到輸入框中時候, 請給使用者一個提示

                    事件: 焦點事件 onfocus

                    觸發函式

                    函式里面要做一些事情

                        span 給使用者提示資訊

                2. 當使用者滑鼠移開時候, 校驗一下使用者輸入

                    事件: 失去焦點  onblur

                    觸發函式

                    函式要幹事情:

                        校驗使用者輸入

                        得到使用者輸入的值

                3. 當使用者按鍵輸入抬起的時候, 校驗一下使用者輸入

        -->

        <script>

            function showTips(spanID,msg){

                var span = document.getElementById(spanID);

                span.innerHTML = msg;

            }

            function checkUsername(){

               

                var uValue = document.getElementById("username").value;

//              alert(uValue);

                var span = document.getElementById("span_username");

                if(uValue.length < 6){

                    span.innerHTML = "對不起,太短啦!"

                    return false;

                }else{

                    span.innerHTML = "恭喜您,夠用!"

                    return true;

                }

            }

            function checkForm(){

                var flag = checkUsername();

                return flag;

            }

        </script>

    </head>

    <body>

        <form action="../01-自動輪播圖片/圖片自動輪播.html" onsubmit="return checkForm()">

            使用者名稱:<input type="text" id="username" onblur="checkUsername()"  onfocus="showTips('span_username','使用者名稱長度不能小於6位')" /><span id="span_username"></span> <br />

            <input type="submit" value="註冊" />

        </form>

    </body>

</html>

©著作權歸作者所有：來自51CTO部落格作者知止內明的原創作品，如需轉載，請註明出處，否則將追究法律責任


來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/4822/viewspace-2819070/，如需轉載，請註明出處，否則將追究法律責任。

相關文章