1、通用方法
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样式。
--申明方式：
<!DOCTYPEhtml>
<html>
<head>
<linkrel="stylesheet"href="dijit/themes/claro/claro.css">
<script>dojoConfig={parSEOnLoad:true}</script>
<scriptsrc='dojo/dojo.js'></script>
<script>
require(["dojo/parser","dijit/form/TextBox","dojo/domReady!"]);
</script>
<title>TextBox</title>
</head>
<bodyclass="claro">
<labelfor="firstname">Auto-trimming,Proper-casingTextBox:</label>
<inputtype="text"name="firstname"value="testingtesting"
data-dojo-type="dijit/form/TextBox"
data-dojo-props="trim:true,propercase:true"id="firstname"/>
</body>
</html>
结果：
--编程方式
<!DOCTYPEhtml>
<html>
<head>
<linkrel="stylesheet"href="dijit/themes/claro/claro.css">
<script>dojoConfig={parSEOnLoad:true}</script>
<scriptsrc='dojo/dojo.js'></script>
<script>
require(["dijit/form/TextBox","dojo/domReady!"],function(TextBox){
varmyTextBox=newdijit.form.TextBox({
name:"firstname",value:""/*nooremptyvalue!*/,placeHolder:"typeinyourname"
},"firstname");
});
</script>
<title>TextBox</title>
</head>
<bodyclass="claro">
<inputid="firstname"/>
</body>
</html>
结果：
注意：placeHolder和value属性的区别，placeHolder在输入框处入焦点时文字会消失，而value不会。
<!DOCTYPEhtml>
<html>
<head>
<linkrel="stylesheet"href="dijit/themes/claro/claro.css">
<script>dojoConfig={parSEOnLoad:true}</script>
<scriptsrc='dojo/dojo.js'></script>
<script>
require(["dojo/parser","dijit/registry","dojo/on",function(parser,registry,on){
parser.parse();
varBox0=registry.byId("value0Box");
varBox1=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>
<bodyclass="claro">
<labelfor="value0Box">AtextBoxwithavalue:</label>
<inputid="value0Box"data-dojo-type="dijit/form/TextBox"
value="Somevalue"
data-dojo-props="intermediateChanges:true"></input>
<br>
<labelfor="value1Box">AtextBoxsetwithavaluefromtheabovetextBox:</label>
<inputid="value1Box"
data-dojo-type="dijit/form/TextBox"></input>
<br>
</body>
</html>
--综合应用：
<!DOCTYPEhtml>
<html>
<head>
<linkrel="stylesheet"href="dijit/themes/claro/claro.css">
<script>dojoConfig={parSEOnLoad:true}</script>
<scriptsrc='dojo/dojo.js'></script>
<script>
//loadrequirementsfordeclarativewidgetsinpagecontent
require(["dijit/form/NumberTextBox","dijit/form/CurrencyTextBox","dijit/form/TimeTextBox","dijit/form/DateTextBox",function(NumberTextBox,CurrencyTextBox,TimeTextBox,DateTextBox){
varnumber=newNumberTextBox({
value:54,required:true
},"number");
number.startup();
varcurrency=newCurrencyTextBox({
value:54775.53,required:true,constraints:{fractional:true},currency:"CNY",invalidMessage:"无效值."
},"currency");
currency.startup();
vartime=newTimeTextBox({
constraints:{
timePattern:"HH:mm:ss",clickableIncrement:"T00:15:00",visibleIncrement:"T00:15:00",visibleRange:"T01:00:00"
},invalidMessage:"Invalidtime."
},"time");
time.startup();
vardate=newDateTextBox({
value:newDate(2011,8,15)
},"date");
date.startup();
});
</script>
<title>TextBox</title>
</head>
<bodyclass="claro">
<h1>dijit/form/NumberTextBox,dijit/form/CurrencyTextBox,dijit/form/TimeTextBox,dijit/form/DateTextBox</h1>
<div>
<labelfor="number">Age:</label>
<inputid="number">
</div>
<div>
<labelfor="currency">AnnualSalary:</label>
<inputid="currency">
</div>
<div>
<labelfor="time">StartTime:</label>
<inputid="time">
</div>
<div>
<labelfor="date">StartDate:</label>
<inputid="date">
</div>
</body>
</html>
结果:
2、 dijit/form/ValidationTextBox
Extends: dijit/form/TextBox，利用required属性指定字段必填，regExp属性指定字段验证规则。
<!DOCTYPEHTML> <htmllang="en"> <head> <Metacharset="utf-8"> <title>Demo:ValidateTextBox</title> <linkrel="stylesheet"href="dijit/themes/claro/claro.css"> <scriptsrc="dojo/dojo.js"data-dojo-config="async:true,parSEOnLoad:true"></script> <styletype="text/css"> label{ display:inline-block; width:140px; } </style> <script> require(["dojo/parser","dijit/form/ValidationTextBox"]); </script> </head> <bodyclass="claro"> <labelfor="zip">Also5-DigitU.S.Zipcodeonly:</label> <inputtype="text"id="zip"name="zip"value="00000"required="true" data-dojo-type="dijit/form/ValidationTextBox" data-dojo-props="regExp:'\\d{5}',invalidMessage:'Invalidzipcode.'"/> </body> </html>
输出：
3、 dijit/form/ComboBox
Extends: dijit/form/ValidationTextBox,dijit/form/ComboBoxMixin。ComBoxBox包含可选值的下拉列表，另外还可以手工输入。
| 属性 | 属性类别 | 描述 |
| autoComplete | Boolean true |
判断是否自动完成用户输入的内容。当值为真时，用户输入部分字符串，ComboBox widget 会把能匹配上的可选值列出，如果光标离开此 widget，会显示第一个匹配的选项值。 |
| hasDownArrow | 判断是否现实下拉按钮。 | |
| ignoreCase | 判断是否忽略大小写（针对英文的输入）。 | |
| pageSize | Integer Infinity |
此属性可以设置下拉列表显示的条数，如果出现多页的情况，会在下拉列表中显示” PrevIoUs choices ”和” More choices ”按钮。用户可以通过点击这两个按钮来查找选项。 |
| query | Object {} |
设置查询表达式以过滤’ store ’里的选项。 |
| searchAttr | String name |
设置查找的匹配表达式 |
| searchDelay | boolean true |
当用户输入内容后到 Dojo 开始查找用户输入值的匹配项之间的间隔时间。 |
| store | Object | 数据提供对象的一个引用。 .Dijit 中一般应用 JSON 格式的数据。 |
--编程方式样例：
<!DOCTYPEHTML> <htmllang="en"> <head> <Metacharset="utf-8"> <title>Demo:ComboBox</title> <linkrel="stylesheet"href="dijit/themes/claro/claro.css"> <scriptsrc="dojo/dojo.js"data-dojo-config="async:true,parSEOnLoad:true"></script> <styletype="text/css"> label{ display:inline-block; width:140px; } </style> <script> require([ "dojo/store/Memory","dijit/form/ComboBox","dojo/domReady!" ],function(Memory,ComboBox){ varstateStore=newMemory({ data:[ {name:"Alabama",id:"AL"},{name:"Alaska",id:"AK"},{name:"AmericanSamoa",id:"AS"},{name:"Arizona",id:"AZ"},{name:"Arkansas",id:"AR"},{name:"ArmedForcesEurope",id:"AE"},{name:"ArmedForcesPacific",id:"AP"},{name:"ArmedForcestheAmericas",id:"AA"},{name:"California",id:"CA"},{name:"Colorado",id:"CO"},{name:"Connecticut",id:"CT"},{name:"Delaware",id:"DE"} ] }); varcomboBox=newComboBox({ id:"stateSelect",name:"state",value:"California",store:stateStore,searchAttr:"name" },"stateSelect"); }); </script> </head> <bodyclass="claro"> <inputid="stateSelect"> <p><buttononClick="alert(dijit.byId('stateSelect').get('value'))">Getvalue</button></p> </body> </html>
<!DOCTYPEHTML> <htmllang="en"> <head> <Metacharset="utf-8"> <title>Demo:ComboBox</title> <linkrel="stylesheet"href="dijit/themes/claro/claro.css"> <scriptsrc="dojo/dojo.js"data-dojo-config="async:true,"dijit/form/ComboBox"]); </script> </head> <bodyclass="claro"> <selectdata-dojo-type="dijit/form/ComboBox"id="fruit"name="fruit"> <option>Apples</option> <optionselected>Oranges</option> <option>Pears</option> </select> </body> </html>
--select样例：
<!DOCTYPEHTML> <htmllang="en"> <head> <Metacharset="utf-8"> <title>Demo:ComboBox</title> <linkrel="stylesheet"href="dijit/themes/claro/claro.css"> <scriptsrc="dojo/dojo.js"data-dojo-config="async:true,"dojo/store/Memory"]); </script> </head> <bodyclass="claro"> <divdata-dojo-type="dojo/store/Memory" data-dojo-id="stateStore" data-dojo-props="data:[{id:'y',name:'yes'},{id:'n',name:'no'}]"></div> <inputdata-dojo-type="dijit/form/ComboBox" value="yes" data-dojo-props="store:stateStore,searchAttr:'name'" name="state" id="stateInput"/> </body> </html>原文链接：https://www.f2er.com/dojo/291109.html