如何制作甜蜜警报自定义键盘

Question

我正在尝试在我的应用程序中实现一个甜蜜的警报弹出窗口作为基本的引脚锁，以防止任何未经授权的人使用它。该应用程序将在大型触摸面板上运行，无需连接任何外围设备，因此我仅限于用于用户输入的触摸屏。所以我的解决方案是在我的甜蜜警报窗口中添加按钮，该按钮将充当输入引脚的键盘(正如您将在图像中看到的那样，这项工作仍在进行中)。问题是我找不到一种方法来访问甜蜜警报窗口输入字段的内部 HTML 以实际向其写入值。我尝试通过将inputAttributes添加到我的甜蜜警报对象来做到这一点，但不幸的是，它不起作用。当尝试使用JQuery时，我也很不自在。

我的甜蜜警报窗口的设置：

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);
}
}

用于设置我的甜蜜警报HTML和CSS(键盘.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>';

我的窗口外观的图像(如前所述，仍在进行中)：

我的窗口

不幸的是，我没有任何控制台警告要显示，因为我没有得到任何警告，并且我确实仔细检查了所有内容是否正确导入。

提前感谢您提供的任何帮助或建议！

Answer 1

• 删除input:'password'并将密码字段追加为 HTML 元素。
• 删除content: { element: "textarea" },，因为没有必要

<小时 />

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);
}
}

像这样捕获输入

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

注意：您必须编写单独的条件来捕获"back"和"clr">

Answer 2

感谢 sbkrish，我设法启动并运行了它，最终代码如下所示，请注意，某些样式仍然需要工作，但其余代码运行良好。

键盘.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);
}
}