DevExtreme jQuery/JS - Task-Specific Modes

Depending on the value the TextBox should hold, specify the widget mode option. When set to "email", "tel" or "url", this option affects the set of keyboard buttons shown on a mobile device when the widget gets focused. When set to "search" or "password", the mode option impacts the visual representation of the widget. For example, the following code hides input characters behind asterisks.

jQuery
JavaScript
$(function() {
    $("#textBoxContainer").dxTextBox({
        mode: "password"
    });
});
Angular
HTML
TypeScript
<dx-text-box
    mode="password">
</dx-text-box>
import { DxTextBoxModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxTextBoxModule
    ],
    // ...
})
Vue
<template>
    <DxTextBox mode="password"/>
</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
                mode="password"
            />
        );
    }
}

export default App;
See Also