JavaScript Tutorial/Dojo toolkit/TextBox
Содержание
Create TextBox
<source lang="javascript">
<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="javascript">
<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="javascript">
<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="javascript">
<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="javascript">
<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="javascript">
<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="javascript">
<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>