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