JavaScript DHTML/Dojo toolkit/TextBox

Материал из Web эксперт
Перейти к: навигация, поиск

Create TextBox

   <source lang="html4strict">

<html>

 <head>
   <link rel="StyleSheet" type="text/css"
     href="js/dojo/dijit/themes/tundra/tundra.css">
   <script type="text/javascript">
     var djConfig = {
       baseScriptUri : "js/dojo/",
       parseOnLoad : true
     };
   </script>
   <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
   <script>
     dojo.require("dojo.parser");
     dojo.require("dijit.form.TextBox");
     dojo.addOnLoad(show);
     
     
     function show() {
       var myDijit = new dijit.form.TextBox({
         value : 12.34
       });
       dojo.byId("my").appendChild(myDijit.domNode);
     }
   </script>
 </head>
 <body class="tundra">
 
 </body>

</html>

 </source>
   
  


Get value from dijit.form.TextBox and do the validation

   <source lang="html4strict">

<html>

 <head>
   <link rel="StyleSheet" type="text/css" href="js/dojo/dijit/themes/tundra/tundra.css">
   <script type="text/javascript">
     var djConfig = {
       baseScriptUri : "js/dojo/",
       parseOnLoad : true
     };
   </script>
   <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
   <script>
           dojo.require("dojo.parser");
           dojo.require("dijit.form.TextBox");
           function help(  ) {
               var msg="Help";
               alert(msg);
               return false;
           }
           function validate(  ) {
               var f = document.getElementById("registration_form");
               if (f.first.value == "" ||f.last.value == "" ||f.email.value == "") {
                       alert("All fields are required.");
                       return false;
               }
               return true;
           }
   </script>
 </head>
 <body class="tundra">
     <form id="registration_form"
           onsubmit="javascript:return validate()"
           action="">
           First Name:<input dojoType="dijit.form.TextBox" propercase=true trim=true name="first">
Last Name:<input dojoType="dijit.form.TextBox" propercase=true trim=true name="last">
Your Email:<input dojoType="dijit.form.TextBox" length=25 name="email">
<button type="submit">Sign Up!</button> <button type="reset">Reset</button> <button type="button" onclick="javascript:help()">Help</button> </form>

</body> </html>

 </source>
   
  


Set prompt message for TextBox

   <source lang="html4strict">

<html>

 <head>
   <link rel="StyleSheet" type="text/css"
     href="js/dojo/dijit/themes/tundra/tundra.css">
   <script type="text/javascript">
     var djConfig = {
       baseScriptUri : "js/dojo/",
       parseOnLoad : true
     };
   </script>
   <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
   <script>
     dojo.require("dojo.parser");  
     dojo.require("dijit.form.ValidationTextBox");
   </script>
 </head>
 <body class="tundra">
 <form action="" method="get" name="custForm">
       <label for="firstName">Name: </label>
       <input type="text" id="firstName" name="firstName" 
          dojoType="dijit.form.ValidationTextBox"
          required="true" 
          propercase="true" 
          promptMessage="Enter first name."
          invalidMessage="First name is required."  
          trim="true"  
          style="width: 10em;"
       />
   

</form>

 </body>

</html>

 </source>
   
  


Simple TextBox

   <source lang="html4strict">

<html>

 <head>
   <link rel="StyleSheet" type="text/css"
     href="js/dojo/dijit/themes/tundra/tundra.css">
   <script type="text/javascript">
     var djConfig = {
       baseScriptUri : "js/dojo/",
       parseOnLoad : true
     };
   </script>
   <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
   <script>
     dojo.require("dojo.parser");
     dojo.require("dijit.form.TextBox");
   </script>
 </head>
 <body class="tundra">
    <input type="textbox" dojoType="dijit.form.TextBox">
 </body>

</html>

 </source>
   
  


TextBox proper case

   <source lang="html4strict">

<html>

 <head>
   <link rel="StyleSheet" type="text/css" href="js/dojo/dijit/themes/tundra/tundra.css">
   <script type="text/javascript">
     var djConfig = {
       baseScriptUri : "js/dojo/",
       parseOnLoad : true
     };
   </script>
   <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
   <script>
           dojo.require("dojo.parser");
           dojo.require("dijit.form.TextBox");
           function help(  ) {
               var msg="Help";
               alert(msg);
               return false;
           }
           function validate(  ) {
               var f = document.getElementById("registration_form");
               if (f.first.value == "" ||f.last.value == "" ||f.email.value == "") {
                       alert("All fields are required.");
                       return false;
               }
               return true;
           }
   </script>
 </head>
 <body class="tundra">
     <form id="registration_form"
           onsubmit="javascript:return validate()"
           action="">
           First Name:<input dojoType="dijit.form.TextBox" propercase=true trim=true name="first">
Last Name:<input dojoType="dijit.form.TextBox" propercase=true trim=true name="last">
Your Email:<input dojoType="dijit.form.TextBox" length=25 name="email">
<button type="submit">Sign Up!</button> <button type="reset">Reset</button> <button type="button" onclick="javascript:help()">Help</button> </form>

</body> </html>

 </source>
   
  


Trim dijit.form.TextBox

   <source lang="html4strict">

<html>

 <head>
   <link rel="StyleSheet" type="text/css" href="js/dojo/dijit/themes/tundra/tundra.css">
   <script type="text/javascript">
     var djConfig = {
       baseScriptUri : "js/dojo/",
       parseOnLoad : true
     };
   </script>
   <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
   <script>
           dojo.require("dojo.parser");
           dojo.require("dijit.form.TextBox");
           function help() {
               var msg="Help";
               alert(msg);
               return false;
           }
           function validate(){
               var f = document.getElementById("registration_form");
               if (f.first.value == "" ||f.last.value == "" ||f.email.value == "") {
                       alert("All fields are required.");
                       return false;
               }
               return true;
           }
   </script>
 </head>
 <body class="tundra">
     <form id="registration_form"
           onsubmit="javascript:return validate()"
           action="">
           First Name:<input dojoType="dijit.form.TextBox" propercase=true trim=true name="first">
Last Name:<input dojoType="dijit.form.TextBox" propercase=true trim=true name="last">
Your Email:<input dojoType="dijit.form.TextBox" length=25 name="email">
<button type="submit">Sign Up!</button> <button type="reset">Reset</button> <button type="button" onclick="javascript:help()">Help</button> </form>

</body> </html>

 </source>
   
  


Use your own format function to format a dijit.form.TextBox

   <source lang="html4strict">

<html>

 <head>
   <link rel="StyleSheet" type="text/css" href="js/dojo/dijit/themes/tundra/tundra.css">
   <script type="text/javascript">
     var djConfig = {
       baseScriptUri : "js/dojo/",
       parseOnLoad : true
     };
   </script>
   <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
   <script>
           dojo.require("dojo.parser");
           dojo.require("dijit.form.TextBox");
           function mixedCapitalization(value) {
             var newValue = "";
             dojo.forEach(value.toLowerCase(  ), function(x) {
                  newValue += x.toUpperCase(  );
               });
             return newValue;
           }
   </script>
 </head>
 <body class="tundra">
     <form id="registration_form"
           onsubmit="javascript:return validate()"
           action="">
           First Name:<input dojoType="dijit.form.TextBox" format="mixedCapitalization" name="first">
</form>

</body> </html>

 </source>