TextBox

The TextBox is used to enter plain text, it has many options like clear button, format function, etc. You could also change its type to use it as a password input or a native date input.

Textbox with clear button 



Using custom format: 



Disabled 

Password input 

Native date and time editors 

Native Color Picker 


TextBoxDemo/Index.cshtml
<h2>Textbox with clear button</h2>
@(Html.Awe().TextBox(new TextBoxOpt { Name = "Name", Placeholder = "type here...", ClearBtn = true }))
<br />
<br />
<h2>Using custom format:</h2>
@(Html.Awe().TextBox(new TextBoxOpt { Name = "Exp", Value = "the actual value", FormatFunc = "valFunc" }))
<br />
<br />

<h2>Disabled</h2>
@(Html.Awe().TextBox(new TextBoxOpt { Name = "disbl", Enabled = false, Value = "abc" }))

<script>
function valFunc(val) {
return "secret";
}
</script>

<h2>Password input</h2>
@(Html.Awe().TextBox(new TextBoxOpt { Name = "Password1", Type = "password" }))
@(Html.Awe().TextBox(new TextBoxOpt { Name = "Password2", Type = "password", ClearBtn = true, FormatFunc = "valFunc" }))

<h2>Native date and time editors</h2>
@(Html.Awe().TextBox(new TextBoxOpt { Name = "date1", Type = "date", ClearBtn = true }))
@(Html.Awe().TextBox(new TextBoxOpt { Name = "time1", Type = "time", ClearBtn = true }))
<h2>Native Color Picker</h2>
@(Html.Awe().TextBox(new TextBoxOpt { Name = "color1", Type = "color", Value = "#12d393" }))
<style>
input[type=color] {
height: 2.3em;
padding: 0.2em;
}
</style>




Comments