All docs
V21.1
24.1
The page you are viewing does not exist in version 24.1.
23.2
The page you are viewing does not exist in version 23.2.
23.1
The page you are viewing does not exist in version 23.1.
22.2
22.1
21.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2.
19.1
The page you are viewing does not exist in version 19.1.
18.2
The page you are viewing does not exist in version 18.2.
18.1
The page you are viewing does not exist in version 18.1.
17.2
The page you are viewing does not exist in version 17.2.
A newer version of this page is available. Switch to the current version.

jQuery TextBox - Task-Specific Modes

Depending on the value the TextBox should hold, specify the UI component mode property. When set to "email", "tel" or "url", this property affects the set of keyboard buttons shown on a mobile device when the UI component gets focused. When set to "search" or "password", the mode property impacts the visual representation of the UI component. 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.light.css';

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

export default {
    components: {
        DxTextBox
    }
}
</script>
React
import React from 'react';
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