jQuery TextBox - Getting Started
jQuery
Angular
Vue
React
TextBox is a component that allows users to enter and edit a single line of text.
This tutorial shows how to add a TextBox to your application and configure its core features.
Each section in this tutorial describes a single configuration step. You can also find the full code in the following GitHub repository: getting-started-with-textbox.
Create a TextBox
jQuery
Add DevExtreme to your jQuery application and use the following code to create a TextBox:
$(function() {
$("#textbox").dxTextBox({ });
});
<html>
<head>
<!-- ... -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/22.1.13/css/dx.light.css">
<script type="text/javascript" src="https://cdn3.devexpress.com/jslib/22.1.13/js/dx.all.js"></script>
<script type="text/javascript" src="index.js"></script>
</head>
<body>
<div id="textbox"></div>
</body>
</html>Angular
Add DevExtreme to your Angular application and use the following code to create a TextBox:
<dx-text-box></dx-text-box>
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { DxTextBoxModule } from 'devextreme-angular';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
DxTextBoxModule
],
providers: [ ],
bootstrap: [AppComponent]
})
export class AppModule { }Vue
Add DevExtreme to your Vue application and use the following code to create a TextBox:
<template>
<DxTextBox />
</template>
<script>
import 'devextreme/dist/css/dx.light.css';
import { DxTextBox } from 'devextreme-vue/text-box';
export default {
components: {
DxTextBox
}
}
</script>React
Add DevExtreme to your React application and use the following code to create a TextBox:
import React from 'react';
import 'devextreme/dist/css/dx.light.css';
import { TextBox } from 'devextreme-react/text-box';
function App() {
return (
<TextBox />
);
}
export default App;Configure the Input Mode
Specify the TextBox mode property to allow users to type in a specific text type. Set this property to "email", "tel", or "url" to specify the set of keyboard buttons that a mobile device shows when the UI component is focused. When you set the mode property to "search", the TextBox contains the Clear button, which empties its contents. When you set the mode property to "password", the TextBox hides input characters behind asterisks.
jQuery
$(function() {
$("#textbox").dxTextBox({
mode: "url"
});
});Angular
<dx-text-box
mode="url"
>
</dx-text-box>Vue
<template>
<DxTextBox
mode="url"
/>
</template>
<script>
// ...
</script>React
// ...
function App() {
return (
<TextBox
mode="url"
/>
);
}
export default App;Specify a Label or Placeholder
Use the placeholder property to give users a hint about what they should type in the TextBox. You can also use the label property for this purpose. If you specify the label property, set the labelMode property to one of the following values:
"static"
The component displays the label above the input field."floating"
The component uses the label as a placeholder, but when the editor gets focus, the label moves to the position above the input field."hidden"
The label is hidden.
In this tutorial, the component also uses label as a placeholder, because the labelMode property is set to "floating".
jQuery
$(function() {
$("#textbox").dxTextBox({
// ...
label: "Link",
labelMode: "floating"
});
});Angular
<dx-text-box ...
label="Link"
labelMode="floating"
>
</dx-text-box>Vue
<template>
<DxTextBox ...
label="Link"
label-mode="floating"
/>
</template>
<script>
// ...
</script>React
// ...
function App() {
return (
<TextBox ...
label="Link"
labelMode="floating"
/>
);
}
export default App;Limit the Text Length
Assign an integer number to the maxLength property to limit the text length.
jQuery
$(function() {
$("#textbox").dxTextBox({
// ...
maxLength: 20
});
});Angular
<dx-text-box ...
[maxLength]="20"
>
</dx-text-box>Vue
<template>
<DxTextBox ...
:max-length="20"
/>
</template>
<script>
// ...
</script>React
// ...
function App() {
return (
<TextBox ...
maxLength={20}
/>
);
}
export default App;Place Buttons Inside a TextBox
Specify the showClearButton property to add a Clear button that empties the TextBox on click. You can also add custom buttons to the input text field. Declare them in the buttons[] array. To see an example, refer to this demo: Custom Text Editor Buttons.
jQuery
$(function() {
$("#textbox").dxTextBox({
// ...
showClearButton: true
});
});Angular
<dx-text-box ...
[showClearButton]="true"
>
</dx-text-box>Vue
<template>
<DxTextBox ...
:show-clear-button="true"
/>
</template>
<script>
// ...
</script>React
// ...
function App() {
return (
<TextBox ...
showClearButton={true}
/>
);
}
export default App;Handle the Keyboard Events
The TextBox raises three keyboard events: keyDown, keyUp, and enterKey. Handle these events to access the original keyboard events.
In this tutorial, users can see the TextBox value in the browser console after they press the Enter key.
jQuery
$(function() {
$("#textbox").dxTextBox({
// ...
onEnterKey: function(e) {
console.log(e.component.option("value"));
}
});
});Angular
<dx-text-box ...
[(value)]="value"
(onEnterKey)="onEnterKey()"
>
</dx-text-box>
// ...
export class AppComponent {
value: string = "";
onEnterKey() {
console.log(this.value);
}
}Vue
<template>
<DxTextBox
v-model:value="value"
@enter-key="onEnterKey($event)"
/>
</template>
<script>
// ...
export default {
// ...
data() {
return {
value: ""
}
},
methods: {
onEnterKey() {
console.log(this.value);
}
}
}
</script>React
import React, { useState, useCallback } from 'react';
// ...
function App() {
const [value, setValue] = useState("");
const onValueChange = useCallback((v) => {
setValue(v)
}, []);
const onEnterKey = useCallback(() => {
console.log(value)
}, [value]);
return (
<TextBox ...
value={value}
valueChangeEvent="input"
onValueChange={onValueChange}
onEnterKey={onEnterKey}
/>
);
}
export default App;