首页 > 代码库 > Dojo学习笔记（十三）：Dojo表单控件——TextBox及其变体
Dojo学习笔记（十三）：Dojo表单控件——TextBox及其变体
dijit/form/TextBox ：一个基本的文本框
dijit/form/SimpleTextarea ：大量文字输入，一个基本的textarea
dijit/form/Textarea ：一个扩展dijit/form/SimpleTextarea动态增加或减少其高度
dijit/form/NumberTextBox或dijit/form/NumberSpinner：输入是数字，确保输入一个文本框，dijit/form/NumberSpinner提供扩展dijit/form/NumberTextBox逐步改变值的按钮
dijit/form/DateTextBox ：输入是日期，一个文本框，其中包括一个弹出日历
dijit/form/TimeTextBox ：输入是时间，一个文本框，其中包括一个弹出时间选择器
dijit/form/CurrencyTextBox ：输入是货币，一个扩展dijit/form/NumberTextBox本地化货币
dijit/form/ValidationTextBox：一个基本的验证能力，可以进一步定制
如果你要使用dijit/form/DateTextBox或dijit/form/TimeTextBox ，你将需要有主题的CSS引入并设置body元素的css样式。
--申明方式：
<!DOCTYPE html>
<html >
<head>
<link rel="stylesheet" href="http://www.mamicode.com/dijit/themes/claro/claro.css">
<script>dojoConfig = {parseOnLoad: true}</script>
<script src=http://www.mamicode.com/‘dojo/dojo.js‘></script>"dojo/parser", "dijit/form/TextBox","dojo/domReady!"]);
</script>
<title>TextBox</title>
</head>
<body class="claro">
<label for="firstname">Auto-trimming, Proper-casing Textbox:</label>
<input type="text" name="firstname" value="http://www.mamicode.com/testing testing"
data-dojo-type="dijit/form/TextBox"
data-dojo-props="trim:true, propercase:true" id="firstname" />
</body>
</html>结果：
--编程方式
<!DOCTYPE html>
<html >
<head>
<link rel="stylesheet" href="http://www.mamicode.com/dijit/themes/claro/claro.css">
<script>dojoConfig = {parseOnLoad: true}</script>
<script src=http://www.mamicode.com/‘dojo/dojo.js‘></script>"dijit/form/TextBox", "dojo/domReady!"], function(TextBox){
var myTextBox = new dijit.form.TextBox({
name: "firstname",
value: "" /* no or empty value! */,
placeHolder: "type in your name"
}, "firstname");
});
</script>
<title>TextBox</title>
</head>
<body class="claro">
<input id="firstname" />
</body>
</html>结果：
注意：placeHolder和value属性的区别，placeHolder在输入框处入焦点时文字会消失，而value不会。
--使用set()方法和get()方法：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://www.mamicode.com/dijit/themes/claro/claro.css">
<script>dojoConfig = {parseOnLoad: true}</script>
<script src=http://www.mamicode.com/‘dojo/dojo.js‘></script>"dojo/parser", "dijit/registry", "dojo/on", "dijit/form/TextBox", "dojo/domReady!"],
function (parser, registry, on) {
parser.parse();
var box0 = registry.byId("value0Box");
var box1 = registry.byId("value1Box");
box1.set("value", box0.get("value") + " modified");
on(box0, "change", function () {
box1.set("value", box0.get("value") + " modified");
});
});
</script>
<title>TextBox</title>
</head>
<body class="claro">
<label for="value0Box">A textbox with a value:</label>
<input id="value0Box" data-dojo-type="dijit/form/TextBox"
value="http://www.mamicode.com/Some value"
data-dojo-props="intermediateChanges:true"></input>
<br>
<label for="value1Box">A textbox set with a value from the above textbox:</label>
<input id="value1Box"
data-dojo-type="dijit/form/TextBox"></input>
<br>
</body>
</html>http://www.myexception.cn/web/423404.html
本文出自 “IT技术学习与交流” 博客，谢绝转载！
Dojo学习笔记（十三）：Dojo表单控件——TextBox及其变体