Vue TextBox - Limit the String Length

To limit the string length, assign an integer number to the maxLength property. By default, the string length is unlimited.

jQuery
JavaScript
$(function() {
    $("#textBoxContainer").dxTextBox({
        maxLength: 10
    });
});
Angular
HTML
TypeScript
<dx-text-box
    [maxLength]="10">
</dx-text-box>
import { DxTextBoxModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxTextBoxModule
    ],
    // ...
})
Vue
<template>
    <DxTextBox :max-length="10"/>
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { DxTextBox } from 'devextreme-vue/text-box';

export default {
    components: {
        DxTextBox
    }
}
</script>
React
import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { TextBox } from 'devextreme-react/text-box';

class App extends React.Component {
    render() {
        return (
            <TextBox
                maxLength={10}
            />
        );
    }
}

export default App;
See Also