Single line text box
This is an example of the simplest text box:
Example
<div class="mdui-textfield">
<input class="mdui-textfield-input" type="text" placeholder="User Name"/>
</div>
Example
<div class="mdui-textfield">
<label class="mdui-textfield-label">User Name</label>
<input class="mdui-textfield-input" type="text"/>
</div>
Example
<div class="mdui-textfield mdui-textfield-floating-label">
<label class="mdui-textfield-label">Email</label>
<input class="mdui-textfield-input" type="email"/>
</div>
Disabled state
in .mdui-textfield-input Add on element disabled Property to disable the text box.
Example
<div class="mdui-textfield">
<input class="mdui-textfield-input" type="text" disabled placeholder="User Name"/>
</div>
<!-- Fixed label -->
<div class="mdui-textfield">
<label class="mdui-textfield-label">User Name</label>
<input class="mdui-textfield-input" type="text" disabled/>
</div>
<!-- Floating label -->
<div class="mdui-textfield mdui-textfield-floating-label">
<label class="mdui-textfield-label">Email</label>
<input class="mdui-textfield-input" type="email" disabled/>
</div>
Multiline text box
Put the single-line text box input Replace the label with textarea Label, which is a multi-line text box. The multi-line text box will automatically adjust the height of the text box according to the height of the content.
Example
<div class="mdui-textfield">
<textarea class="mdui-textfield-input" placeholder="Description"></textarea>
</div>
<!-- Fixed label -->
<div class="mdui-textfield">
<label class="mdui-textfield-label">Subject</label>
<textarea class="mdui-textfield-input"></textarea>
</div>
<!-- Floating label -->
<div class="mdui-textfield mdui-textfield-floating-label">
<label class="mdui-textfield-label">Message</label>
<textarea class="mdui-textfield-input"></textarea>
</div>
<!-- Disabled state -->
<div class="mdui-textfield mdui-textfield-floating-label">
<label class="mdui-textfield-label">Disabled</label>
<textarea class="mdui-textfield-input" disabled></textarea>
</div>
in textarea Add on rows Attribute, the height of the text box will be fixed.
Example
<div class="mdui-textfield">
<textarea class="mdui-textfield-input" rows="4" placeholder="Message"></textarea>
</div>
With help text
in <div class="mdui-textfield"></div> The last added element inside <div class="mdui-textfield-helper"></div>, You can add help text.
Example
<div class="mdui-textfield">
<input type="email" class="mdui-textfield-input" placeholder="mailbox"/>
<div class="mdui-textfield-helper">Helper Text</div>
</div>
Example
<div class="mdui-textfield">
<i class="mdui-icon material-icons">email</i>
<input class="mdui-textfield-input" type="email" placeholder="Email"/>
</div>
<!-- 固定标签 -->
<div class="mdui-textfield">
<i class="mdui-icon material-icons">account_circle</i>
<label class="mdui-textfield-label">User name</label>
<input class="mdui-textfield-input" type="text"/>
<div class="mdui-textfield-helper">Helper Text</div>
</div>
<!-- 浮动标签、多行文本框 -->
<div class="mdui-textfield mdui-textfield-floating-label">
<i class="mdui-icon material-icons">textsms</i>
<label class="mdui-textfield-label">Message</label>
<textarea class="mdui-textfield-input"></textarea>
</div>
<!-- 禁用状态 -->
<div class="mdui-textfield">
<i class="mdui-icon material-icons">lock</i>
<input class="mdui-textfield-input" type="text" placeholder="Disabled" disabled/>
</div>
Example
<div class="mdui-textfield mdui-textfield-expandable">
<button class="mdui-textfield-icon mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">search</i></button>
<input class="mdui-textfield-input" type="text" placeholder="Search"/>
<button class="mdui-textfield-close mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">close</i></button>
</div>
<div class="mdui-textfield mdui-textfield-expandable mdui-float-right">
<button class="mdui-textfield-icon mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">search</i></button>
<input class="mdui-textfield-input" type="text" placeholder="Search"/>
<button class="mdui-textfield-close mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">close</i></button>
</div>
form validation
MDUI uses HTML5 for form validation, in <div class="mdui-textfield"></div> The last added element inside <div class="mdui-textfield-error"></div>, You can add error messages.
If the error message and help text are included at the same time, the help text needs to be placed after the error message.
Example
<div class="mdui-textfield mdui-textfield-floating-label">
<label class="mdui-textfield-label">User name</label>
<input class="mdui-textfield-input" type="text" required/>
<div class="mdui-textfield-error">Username can not be empty</div>
</div>
<div class="mdui-textfield mdui-textfield-floating-label">
<label class="mdui-textfield-label">Email</label>
<input class="mdui-textfield-input" type="email" required/>
<div class="mdui-textfield-error">Email format error</div>
</div>
<div class="mdui-textfield mdui-textfield-floating-label">
<label class="mdui-textfield-label">Password</label>
<input class="mdui-textfield-input" type="text" pattern="^.*(?=.{6,})(?=.*[a-z])(?=.*[A-Z]).*$" required/>
<div class="mdui-textfield-error">Password must be at least 6 characters and contain upper and lower case letters</div>
<div class="mdui-textfield-helper">Please enter a password with at least 6 digits and containing uppercase and lowercase letters</div>
</div>
In addition to using HTML5 form validation, you can also use JavaScript for validation.
Add a class to the text box that fails the verification .mdui-textfield-invalid, After the verification is passed, the category can be removed.
Example
<div class="mdui-textfield mdui-textfield-invalid">
<label class="mdui-textfield-label">User name</label>
<input class="mdui-textfield-input" type="text"/>
<div class="mdui-textfield-error">Username already exists</div>
</div>
Count
in input Add attributes to elements maxlength="" You can limit the length of the input characters, and MDUI will automatically add real-time word count statistics to the lower right corner of the text box.
Example
<div class="mdui-textfield">
<label class="mdui-textfield-label">User name</label>
<input class="mdui-textfield-input" type="text" maxlength="20"/>
</div>
<div class="mdui-textfield mdui-textfield-floating-label">
<label class="mdui-textfield-label">Email</label>
<input class="mdui-textfield-input" type="email" maxlength="60"/>
<div class="mdui-textfield-error">Email format error</div>
</div>
<div class="mdui-textfield mdui-textfield-floating-label">
<label class="mdui-textfield-label">Message</label>
<textarea class="mdui-textfield-input" maxlength="140"></textarea>
</div>
Dynamically generated text box
If your text box is dynamically generated, you need to call mdui.mutation() Initialize.
If you dynamically modify the content of the text box, you need to call mdui.updateTextFields() Method to reinitialize the text box. This method can accept a .mdui-textfieldThe CSS selector of the class, or DOM element, or an array of DOM elements as a parameter, means that only the specified text box is reinitialized. If no parameters are passed in, all text boxes in the page will be reinitialized.
List of CSS class names
| Class name |
effect |
.mdui-textfield |
Define a text box. |
.mdui-textfield-floating-label |
Define a floating label text box. |
.mdui-textfield-label |
Define the label of the text box. |
.mdui-textfield-input |
Define the input box of the text box. |
.mdui-textfield-error |
Define the error message for form validation. |
.mdui-textfield-helper |
Define the help text for the text box. |