JavaScript DHTML/Dojo toolkit/TextBox
Содержание
Create TextBox
<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">
<div id="my"> </div>
</body>
</html>
Get value from dijit.form.TextBox and do the validation
<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"><br>
Last Name:<input dojoType="dijit.form.TextBox" propercase=true trim=true name="last"><br>
Your Email:<input dojoType="dijit.form.TextBox" length=25 name="email"><br>
<button type="submit">Sign Up!</button>
<button type="reset">Reset</button>
<button type="button" onclick="javascript:help()">Help</button>
</form>
</body>
</html>
Set prompt message for TextBox
<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">
<div class="formContainer">
<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>
</div>
</body>
</html>
Simple TextBox
<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>
TextBox proper case
<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"><br>
Last Name:<input dojoType="dijit.form.TextBox" propercase=true trim=true name="last"><br>
Your Email:<input dojoType="dijit.form.TextBox" length=25 name="email"><br>
<button type="submit">Sign Up!</button>
<button type="reset">Reset</button>
<button type="button" onclick="javascript:help()">Help</button>
</form>
</body>
</html>
Trim dijit.form.TextBox
<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"><br>
Last Name:<input dojoType="dijit.form.TextBox" propercase=true trim=true name="last"><br>
Your Email:<input dojoType="dijit.form.TextBox" length=25 name="email"><br>
<button type="submit">Sign Up!</button>
<button type="reset">Reset</button>
<button type="button" onclick="javascript:help()">Help</button>
</form>
</body>
</html>
Use your own format function to format a dijit.form.TextBox
<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"><br>
</form>
</body>
</html>