TextBox Overview

The TextBox converts an <input> element into a styled textbox.

Basic Usage

The TextBox provides a set of default API configuration options that can be set during its initialization such as value, placeholder, and so on.

The following example demonstrates how to create a TextBox and set some of its configuration options.

<input id="textbox">

<script>
    $(document).ready(function(){
        $("#textbox").kendoTextBox({
            value: "John Doe",
            placeholder: "Name..."
        });
    });
</script>

Initializing the TextBox

Upon its initialization, the TextBox wraps the <input> element with a <span> tag.

The following example demonstrates how to initialize the TextBox.

<input id="textbox">

<script>
    $(document).ready(function(){
        $("#textbox").kendoTextBox();
    });
</script>

Events

The TextBox supports the change event. The change fires each time a new value is set by the user.

Important: The change event is not fired when the value of the widget is changed from JavaScript code.

To handle the TextBox events, you can specify the JavaScript function which will handle the event during the initialization of the widget or use the bind method of the widget after its initialization.

The following example demonstrates how to subscribe to the change event during initialization.

    <input id="textbox" />
    <script>
        $("#textbox").kendoTextBox({
            change: function(e) {
                var value = this.value();
                console.log(value);
            }
        });
    </script>

For a complete example on the basic TextBox events, refer to the demo on using the events of the TextBox.

Referencing Existing Instances

To reference to an existing TextBox instance, use the jQuery.data() method. Once a reference is established, use the API to control its behavior.

The following example demonstrates how to access an existing TextBox instance.

<script>
    var tb = $("#textbox").data("kendoTextBox");
</script>

See Also

In this article
Not finding the help you need? Improve this article