JavaScript (ES5)
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Prevent the focus on the first element in JavaScript (ES5) Dialog control

08 May 2023 / 1 minute to read

By default, the dialog focuses on the first elements of the content area which can be active and focusable. You can prevent this default focusing behavior using the open event and by enabling the preventFocus argument.

Bind the open event and enable the preventFocus argument within an event like the below sample.

Source
Preview
index.js
index.html
Copied to clipboard
ej.base.enableRipple(true);

// Initialization of Dialog component
var dialog = new ej.popups.Dialog({
    header: "Sign In",
    buttons: [{ buttonModel: { isPrimary: true, content: 'Yes' }, click: btnClick }, { buttonModel: { content: 'No'}, click: btnClick }],
    target: document.getElementById("container"),
    height: 'auto',
    width: '300px',
    open: onOpen
});
// Render initialized Dialog
dialog.appendTo('#dialog');

// Sample level code to handle the button click action
document.getElementById('targetButton').onclick = function () {
    // Call the show method to open the Dialog
    dialog.show();
};

function btnClick() {
    dialog.hide();
}

function onOpen(args: OpenEventArgs) {
  //Preventing the default dialog focus
  args.preventFocus = true;
}
Copied to clipboard
<!DOCTYPE html><html lang="en"><head>
            
    <title>Essential JS 2 Dialog with header</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="TypeScript UI Components">
    <meta name="author" content="Syncfusion">
    <link href="styles.css" rel="stylesheet">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-popups/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/21.2.3/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <button class="e-control e-btn" id="targetButton" role="button" e-ripple="true" style="position: absolute;">Open Dialog</button>
        <div id="dialog">
            <div class="form-group"><label for="email">Email:</label>
                <input type="email" class="form-control" id="email">
            </div>
            <div class="form-group">
                <label for="comment">Password:</label>
                <input type="password" class="form-control" id="password">
            </div>
        </div>
    </div>

<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>
Previous
Next