IndexQRCode.cshtml
5.52 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
@{ Layout = "~/Views/Shared/_Layout.cshtml"; }
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@section header
{
<style type="text/css">
.layui-col-sm6{
/*display:flex;*/
}
.layui-input-block2:{
width:80%;
}
.label {
height:240px !important;
}
.text {
border-top:1px solid #eee;
border-bottom:1px solid #eee;
border-right:1px solid #eee;
display: flex;
justify-content: center;
width: 80%;
height: 240px;
}
.qrCode {
width:200px;
height:200px;
}
.layui-input{
width:80%;
}
</style>
}
<div class="layui-form layui-form-pane">
<div class="layui-row">
<div class="layui-form-item">
<p>请在下面文本框输入数据，然后按回车键。</p>
</div>
<div class="layui-form-item">
<div class="layui-col-sm6">
<label class="layui-form-label">二维码数据1</label>
<div class="layui-input-block2">
<input id="qrCode1" type="text" class="layui-input">
</div>
</div>
<div class="layui-col-sm6">
<label class="layui-form-label">二维码数据2</label>
<div class="layui-input-block2">
<input id="qrCode2" type="text" class="layui-input">
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-col-sm6">
<label class="layui-form-label label">二维码生成1</label>
<div class="text layui-input-block2">
<div id="qrCodeData1" class="qrCode" style="margin-bottom:20px;"></div>
</div>
</div>
<div class="layui-col-sm6">
<label class="layui-form-label label">二维码生成2</label>
<div class="text layui-input-block2">
<div id="qrCodeData2" class="qrCode" style="margin-bottom:20px;"></div>
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-col-sm6">
<label class="layui-form-label">二维码数据3</label>
<div class="layui-input-block2">
<input id="qrCode3" type="text" class="layui-input">
</div>
</div>
<div class="layui-col-sm6">
<label class="layui-form-label">二维码数据4</label>
<div class="layui-input-block2">
<input id="qrCode4" type="text" class="layui-input">
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-col-sm6">
<label class="layui-form-label label">二维码生成3</label>
<div class="text layui-input-block2">
<div id="qrCodeData3" class="qrCode" style="margin-top:20px;"></div>
</div>
</div>
<div class="layui-col-sm6">
<label class="layui-form-label label">二维码生成4</label>
<div class="text layui-input-block2">
<div id="qrCodeData4" class="qrCode" style="margin-top:20px;"></div>
</div>
</div>
</div>
</div>
</div>
@section Scripts
{
<script type="text/javascript" src="~/js/qrcode.js"></script>
<script type="text/javascript">
var qrCodeData1 = new QRCode(document.getElementById("qrCodeData1"), { width: 200, height: 200 });
var qrCodeData2 = new QRCode(document.getElementById("qrCodeData2"), { width: 200, height: 200 });
var qrCodeData3 = new QRCode(document.getElementById("qrCodeData3"), { width: 200, height: 200 });
var qrCodeData4 = new QRCode(document.getElementById("qrCodeData4"), { width: 200, height: 200 });
var inputQRCode1 = document.getElementById("qrCode1");
var inputQRCode2 = document.getElementById("qrCode2");
var inputQRCode3 = document.getElementById("qrCode3");
var inputQRCode4 = document.getElementById("qrCode4");
function makeCode() {
if (inputQRCode1.value) {
qrCodeData1.makeCode(inputQRCode1.value);
}
if (inputQRCode2.value) {
qrCodeData2.makeCode(inputQRCode2.value);
}
if (inputQRCode3.value) {
qrCodeData3.makeCode(inputQRCode3.value);
}
if (inputQRCode4.value) {
qrCodeData4.makeCode(inputQRCode4.value);
}
}
makeCode();
inputQRCode1.addEventListener("keydown", (e) => {
if (e.keyCode == 13) {
makeCode();
}
});
inputQRCode2.addEventListener("keydown", (e) => {
if (e.keyCode == 13) {
makeCode();
}
});
inputQRCode3.addEventListener("keydown", (e) => {
if (e.keyCode == 13) {
makeCode();
}
});
inputQRCode4.addEventListener("keydown", (e) => {
if (e.keyCode == 13) {
makeCode();
}
});
inputQRCode1.addEventListener("blur", makeCode);
inputQRCode2.addEventListener("blur", makeCode);
inputQRCode3.addEventListener("blur", makeCode);
inputQRCode4.addEventListener("blur", makeCode);
</script>
}