scanbar.html 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>条码扫描</title>
  7. </head>
  8. <body style="background-color: #f5f5f5;">
  9. <div style="padding:100px;display: flex;justify-content: center;align-items: center;flex-direction: column;">
  10. <div style="padding: 50px;font-size: 30px;font-weight: blod;">
  11. 条码扫描核对
  12. </div>
  13. <div >
  14. <input type="text" style="width: 300px;height: 30px;" id="sacn_input">
  15. <button style="padding:5px 10px;border-radius: 5px;background-color:#2ca8a1;color: #f5f5f5;" onclick="clearInput()">清除输入内容</button>
  16. </div>
  17. <div id="scab_text">
  18. </div>
  19. </div>
  20. </body>
  21. </html>
  22. <script>
  23. window.onload = function() {
  24. let sacn_input = document.getElementById("sacn_input");
  25. sacn_input.focus();
  26. sacn_input.addEventListener("keyup", function(event) {
  27. if (event.keyCode === 13) {
  28. let sacn_text = sacn_input.value;
  29. let scab_text = document.getElementById("scab_text");
  30. scab_text.innerHTML = "条码:" + sacn_text;
  31. }
  32. });
  33. };
  34. function clearInput() {
  35. let scab_text = document.getElementById("scab_text");
  36. scab_text.innerHTML = "";
  37. }
  38. </script>