Event type (onfocus and onblur)

<! DOCTYPE HTML > 
< HTML lang = "EN" > 
< head > 
    < Meta charset = "UTF-. 8" > 
    < Meta name = "the viewport" Content = "width = Device-width, Initial-Scale = 1.0" > 
    < Meta HTTP-equiv = "X--the UA-Compatible" Content = "IE = Edge" > 
    < title > event type (the onfocus and the onblur) </ title > 
    <-!  
        the onfocus; trigger has the focus (for example: the input box is obtained when the cursor is triggered 
        onblur;Trigger loses focus (for example: when the cursor is lost trigger input box 
        commonly used in the form 
     ->
     < Style > 
         # name, hint # { a float : left ; margin-Top : 20px ; } 
     </ style > 
     < Script > 
         the window.onload = function () {
              var use = document.getElementById ( " name " ); // Get a user name input box 
             var Hin = document.getElementById ( " hint " ); // get ideas 
             use.onfocus =function () {    // Trigger input box cursor obtained 
                hin.innerHTML = " After setting can not be changed, not less than four characters, up to 14 characters " ; 
             } 
             use.onblur = function () {     // input box cursor losing triggering 
                 IF (use.value.length < 4  || use.value.length > 14 ) {     // character input is less than 4 or greater than 14 
                     hin.innerHTML = ' <IMG the src = "../ IMG / NO .png "/> ' ; 
                 } the else {      // otherwise
                    hin.innerHTML='<img src="../img/yes.png" />';
                 }
             }
         }
     </script>
</head>
<body>
    <input id="name" type="text" placeholder="请输入用户名" />
    <div id="hint"></div>
</body>
</html> 

Guess you like

Origin www.cnblogs.com/vinson-blog/p/12077507.html