How to make a Sweet Alert custom keypad

Rikus Coetzee 0
Viewed 39

I am trying to implement a sweet alert pop-up window in my application as a basic pin lock to prevent anyone who isn't authorised from using it. The application will run on a large touch panel without any peripherals connected to it, so I am limited to only the touchscreen for user input. So my solution is to add buttons to my sweet alert window that will act as the keypad for typing in the pin (Still a work in progress as you will see in the images). The issue is that I can't find a way to access the inner HTML of the input field of the sweet alert windows to actually write values to it. I tried doing it by adding inputAttributes to my sweet alert object, but it did not work, unfortunately. I was also uncusesfull when trying to do it using JQuery.

The set-up for my sweet alert window:

var Lock_HTML = "<style>" + CSS + "</style>" + HTML;

/**/
Panel.Lock = function () {

    if (PasswordChecked === false) {
        Swal.fire({
            title: "Password Required",
            input: 'password',
            html: Lock_HTML,
            content: { element: "textarea" },
            showCancelButton: false, 
            allowOutsideClick: false,
            allowEscapeKey: false,
            inputValidator: (value) => {
                return new Promise((resolve) => {
                    if (value === Password.toString()) {
                        resolve();
                    } else {
                        resolve('Sorry the password is incorrect');
                    }
                })
            }      
        }).then((result) => {
            if (result.value) {
                PasswordChecked = true;
                Panel.Button_Pressed('B-01');
            }
        });
    } else {
        Panel.Check_Lock(OnButtonState);
    }
}

The file used for setting up my sweet alerts HTML and CSS (Keypad.js):

CSS = '*{'+ 
'margin: 0;'+  
'padding: 0;'+  
'}'+  
'body {'+  
'font: 71%/1.5 Verdana, Sans-Serif;'+  
'}'+  
'#container {'+  
'margin: 100px auto;'+  
'width: 760px;'+  
'}'+   
'#keyboard {'+  
'margin: 0;'+  
'padding: 0;'+  
'list-style: none;'+  
'}'+  
    '#keyboard li {'+  
    'float: left;'+  
    'margin: 0 5px 5px 0;'+  
    'width: 60px;'+  
    'height: 60px;'+  
    'font-size: 24px;'+
    'line-height: 60px;'+  
    'text-align: center;'+  
    'background: #fff;'+  
    'border: 1px solid #f9f9f9;'+  
    'border-radius: 5px;'+  
    '}'+  
        '.capslock, .tab, .left-shift, .clearl, .switch {'+  
        'clear: left;'+  
        '}'+  
            '#keyboard .tab, #keyboard .delete {'+  
            'width: 70px;'+  
            '}'+  
            '#keyboard .capslock {'+  
            'width: 80px;'+  
            '}'+  
            '#keyboard .return {'+  
            'width: 90px;'+  
            '}'+  
            '#keyboard .left-shift{'+  
            'width: 70px;'+  
            '}'+  
            '#keyboard .switch {'+
            'width: 90px;'+
            '}'+
            '#keyboard .rightright-shift {'+  
            'width: 109px;'+  
            '}'+  
        '.lastitem {'+  
       'margin-right: 0;'+  
        '}'+  
        '.uppercase {'+  
        'text-transform: uppercase;'+  
        '}'+  
        '#keyboard .space {'+  
        'float: left;'+
        'width: 556px;'+  
        '}'+  
        '#keyboard .switch, #keyboard .space, #keyboard .return{'+
        'font-size: 16px;'+
        '}'+
        '.on {'+  
        'display: none;'+  
        '}'+  
        '#keyboard li:hover {'+  
        'position: relative;'+  
        'top: 1px;'+  
        'left: 1px;'+  
        'border-color: #e5e5e5;'+  
        'cursor: pointer;'+  
        '};';

function Key_Pressed (key) {

}

HTML =  '<div id="container">'+
            '<ul id="keyboard">'+ 
                '<li class="letter" onmousedown="Key_Pressed(1)">1</li>'+
                '<li class="letter" onmousedown="Key_Pressed(2)">2</li>'+
                '<li class="letter" onmousedown="Key_Pressed(3)">3</li>'+
                '<li class="letter clearl" onmousedown="Key_Pressed(4)">4</li>'+
                '<li class="letter" onmousedown="Key_Pressed(5)">5</li>'+ 
                '<li class="letter" onmousedown="Key_Pressed(6)">6</li>'+
                '<li class="letter clearl" onmousedown="Key_Pressed(7)">7</li>'+
                '<li class="letter" onmousedown="Key_Pressed(8)">8</li>'+
                '<li class="letter" onmousedown="Key_Pressed(9)">9</li>'+
                '<li class="letter clearl" onmousedown="Key_Pressed(0)">0</li>'+
                '<li class="letter" onmousedown="Key_Pressed()">bck</li>'+
                '<li class="letter" onmousedown="Key_Pressed()">clr</li>'+
            '</ul>'+     
        '</div>';

An Image of how my window looks (As mentioned, still a work in progress):

My window

Unfortunately I don't have any console warnings to show, because I didn't get any, and I did double check that everything is imported correctly.

Thank you in advance for any help or advice provided!

sweetalert sweetalert2 javascript html
2 Answers
  • Remove input:'password' and append the password field as a HTML element.
  • Remove content: { element: "textarea" }, since it is not necessary
PWD = '<form><input type="password" id="password" name="password" class="swal2-input" placeholder="Password" autocomplete="on"></form>';

var Lock_HTML = "<style>" + CSS + "</style>" + HTML + PWD;

/**/
Panel.Lock = function () {

    if (PasswordChecked === false) {
        Swal.fire({
            title: "Password Required",
            html: Lock_HTML,
            showCancelButton: false, 
            allowOutsideClick: false,
            allowEscapeKey: false,
            inputValidator: (value) => {
                return new Promise((resolve) => {
                    if (value === Password.toString()) {
                        resolve();
                    } else {
                        resolve('Sorry the password is incorrect');
                    }
                })
            }      
        }).then((result) => {
            if (result.value) {
                PasswordChecked = true;
                Panel.Button_Pressed('B-01');
            }
        });
    } else {
        Panel.Check_Lock(OnButtonState);
    }
}

capture the inputs like this

function Key_Pressed(key) {
    $('#password').val($("#password").val() + key);
}

Note: You have to write separate condition to capture 'bck' and 'clr'

sbkrish0

Thanks to sbkrish I managed to get it up and running, the final code is shown below, please note that some of the stylings still require work, but the rest of the code functions well.

Keypad.js

CSS = '*{'+ 
'margin: 0;'+  
'padding: 0;'+  
'}'+  
'body {'+  
'font: 71%/1.5 Verdana, Sans-Serif;'+  
'}'+  
'#container {'+  
'margin: 100px auto;'+  
'width: 760px;'+  
'}'+   
'#keyboard {'+  
'margin: 0;'+  
'padding: 0;'+  
'list-style: none;'+  
'}'+  
    '#keyboard li {'+  
    'float: left;'+  
    'margin: 0 5px 5px 0;'+  
    'width: 60px;'+  
    'height: 60px;'+  
    'font-size: 24px;'+
    'line-height: 60px;'+  
    'text-align: center;'+  
    'background: #fff;'+  
    'border: 1px solid #f9f9f9;'+  
    'border-radius: 5px;'+  
    '}'+  
        '.capslock, .tab, .left-shift, .clearl, .switch {'+  
        'clear: left;'+  
        '}'+  
            '#keyboard .tab, #keyboard .delete {'+  
            'width: 70px;'+  
            '}'+  
            '#keyboard .capslock {'+  
            'width: 80px;'+  
            '}'+  
            '#keyboard .return {'+  
            'width: 90px;'+  
            '}'+  
            '#keyboard .left-shift{'+  
            'width: 70px;'+  
            '}'+  
            '#keyboard .switch {'+
            'width: 90px;'+
            '}'+
            '#keyboard .rightright-shift {'+  
            'width: 109px;'+  
            '}'+  
        '.lastitem {'+  
       'margin-right: 0;'+  
        '}'+  
        '.uppercase {'+  
        'text-transform: uppercase;'+  
        '}'+  
        '#keyboard .space {'+  
        'float: left;'+
        'width: 556px;'+  
        '}'+  
        '#keyboard .switch, #keyboard .space, #keyboard .return{'+
        'font-size: 16px;'+
        '}'+
        '.on {'+  
        'display: none;'+  
        '}'+  
        '#keyboard li:hover {'+  
        'position: relative;'+  
        'top: 1px;'+  
        'left: 1px;'+  
        'border-color: #e5e5e5;'+  
        'cursor: pointer;'+  
        '};';

function Key_Pressed (key) {

    if (key <= 9) {
        $('#password').val($("#password").val() + key);
    } else if (key === 10){
        $('#password').val($("#password").val().slice(0, -1));
    } else {
        $('#password').val("");
    }
      
}

HTML =  '<div id="container">'+
            '<ul id="keyboard">'+ 
                '<li class="letter" onmousedown="Key_Pressed(1)">1</li>'+
                '<li class="letter" onmousedown="Key_Pressed(2)">2</li>'+
                '<li class="letter" onmousedown="Key_Pressed(3)">3</li>'+
                '<li class="letter clearl" onmousedown="Key_Pressed(4)">4</li>'+
                '<li class="letter" onmousedown="Key_Pressed(5)">5</li>'+ 
                '<li class="letter" onmousedown="Key_Pressed(6)">6</li>'+
                '<li class="letter clearl" onmousedown="Key_Pressed(7)">7</li>'+
                '<li class="letter" onmousedown="Key_Pressed(8)">8</li>'+
                '<li class="letter" onmousedown="Key_Pressed(9)">9</li>'+
                '<li class="letter clearl" onmousedown="Key_Pressed(0)">0</li>'+
                '<li class="letter" onmousedown="Key_Pressed(10)">bck</li>'+
                '<li class="letter" onmousedown="Key_Pressed(11)">clr</li>'+
            '</ul>'+     
        '</div>';

PWD = '<form><input type="password" id="password" name="password"' +
'class="swal2-input" placeholder="Password" autocomplete="on"></form>';

Panel_Functions.js

var Lock_HTML = "<style>" + CSS + "</style>" + HTML + PWD;

/**/
Panel.Lock = function () {

    if (PasswordChecked === false) {
        Swal.fire({
            title: "Password Required",
            html: Lock_HTML,
            showCancelButton: false, 
            allowOutsideClick: false,
            allowEscapeKey: false,     
        }).then(() => {
            if ($("#password").val() === Password.toString()) {
                PasswordChecked = true;
                Panel.Button_Pressed('B-01');
            } else {
                Swal.fire(
                'Wrong Password',
                'Access Denied',
                'warning'
                )
            }
        });
    } else {
        Panel.Check_Lock(OnButtonState);
    }
}
Rikus Coetzee0
Related