个人中心
gpt4 book ai didi

javascript - 单击按钮扫描到 elementbyid？

转载 作者：行者123 更新时间：2023-11-30 06:13:45 24 4
gpt4 key购买 nike

本例提示条码扫描，然后将值放入“扫描输入”框。这非常适用于一个输入/一个按钮。

我的问题是我希望能够添加多个输入/按钮，然后进行扫描，然后将值放入相应的输入文本框中。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Scandit Web SDK</title>
    <link rel="stylesheet" href="style.css">
    <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0'/>

    <!-- Add the library, as explained on http://docs.scandit.com/stable/web/index.html -->
    <script src="https://cdn.jsdelivr.net/npm/scandit-sdk@4.x"></script>
</head>

<body onclick="console.log('body clicked')">
    <div id="scandit-barcode-picker"></div>
    <div id="input-container">
        <input id="scan-input" type="text" placeholder="Scan Receiver...">
        <button id="scan" onclick="scan()">SCAN
        </button>
    </div>

    <script>
        function scan() {
            startScanning();
        }
        function showScanner() {
            scannerContainer.style.opacity = "1";
            scannerContainer.style.zIndex = "1";
        }
        function hideScanner() {
            scannerContainer.style.opacity = "0";
            scannerContainer.style.zIndex = "-1";
        }
        function startScanning() {
            showScanner();
            if (picker) {
                picker.resumeScanning();
            }
        }
        function stopScanning() {
            hideScanner();
            if (picker) {
                picker.pauseScanning();
            }
        }
        // Configure the library and activate it with a license key
        const licenseKey = "LICENSE_KEY_HERE";
        // Configure the engine location, as explained on http://docs.scandit.com/stable/web/index.html
        const engineLocation = "https://cdn.jsdelivr.net/npm/scandit-sdk@4.x/build"
        ScanditSDK.configure(licenseKey, { engineLocation: engineLocation });
        const scannerContainer = document.getElementById("scandit-barcode-picker");
        scannerContainer.style.opacity = "0";
        scannerContainer.style.zIndex = "-1";
        const scanInput = document.getElementById("scan-input");
        let picker;
        // Create & start the picker
        ScanditSDK.BarcodePicker.create(scannerContainer)
            .then(barcodePicker => {
                picker = barcodePicker;
                // Create the settings object to be applied to the scanner
                const scanSettings = new ScanditSDK.ScanSettings({
                    enabledSymbologies: ["ean8", "ean13", "upca", "upce", "code128", "code39"]
                });
                picker.applyScanSettings(scanSettings);
                picker.on("scan", scanResult => {
                    stopScanning();
                    scanInput.value = scanResult.barcodes[0].data;
                });
                picker.on("scanError", error => alert(error.message));
                picker.resumeScanning();
            })
            .catch(alert);
    </script>
</body>
    <style>#scan:after {display:none;}</style>
</html>`

我希望能够添加多个按钮/输入。并用相应的按钮将其放入扫描输入点。

`<input id="scan-input" type="text" placeholder="Scan Receiver...">
<button id="scan" onclick="scan()">SCAN</button>

<input id="scan-input2" type="text" placeholder="Scan Receiver #2...">
<button id="scan2" onclick="scan()">SCAN</button>`

[text1] [button1] ----- 扫描将值放入 text1[text2] [button2] ----- scan places value into text2

最佳答案

这是您的 HTML 的一个稍微改编的版本(在每个 id 中使用一个数字将帮助我们使事情变得更简单):

<input type="text" id="scan-input1" />
<button type="button" id="scan1">SCAN</button>
<br />
<input type="text" id="scan-input2" />
<button type="button" id="scan2">SCAN</button>

然后，在我们的 JavaScript 中，如果 scan1 被按下，我们可以使用以下函数向 scan-input1 发送消息，scan-input2 如果 scan-2 被按下，等等:

[...document.getElementsByTagName('button')].forEach((el) => {
  el.addEventListener('click', (e) => {
    const num = e.currentTarget.id.match(/\d+$/)[0];
    document.getElementById(`scan-input${num}`).value = "Scan Complete";
  });
});

上面的代码:

  • 为每个按钮添加一个点击事件监听器，

  • 从点击按钮的id中获取数字，

  • 使用该数字来定位正确的输入。

上述解决方案的优势在于它可以自动缩放。只要您对每个 id(scan3、scan-input3 等)遵循相同的命名约定，每个新按钮和输入将具有相同的行为。

编辑:您的代码

下面，我已将我的建议插入到您的代码中 - 仅更改最低限度:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Scandit Web SDK</title>
  <link rel="stylesheet" href="style.css">
  <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' />

  <!-- Add the library, as explained on http://docs.scandit.com/stable/web/index.html -->
  <script src="https://cdn.jsdelivr.net/npm/scandit-sdk@4.x"></script>
</head>

<body onclick="console.log('body clicked')">
  <div id="scandit-barcode-picker"></div>
  <div id="input-container">
    <input type="text" id="scan-input1" />
    <button type="button" id="scan1" placeholder="Scan Receiver...">SCAN</button>
    <br />
    <input type="text" id="scan-input2" />
    <button type="button" id="scan2" placeholder="Scan Receiver...">SCAN</button>
    <br />
    <input type="text" id="scan-input3" />
    <button type="button" id="scan3" placeholder="Scan Receiver...">SCAN</button>
    </button>
  </div>

  <script>
    let scanInput;

    [...document.getElementsByTagName('button')].forEach((el) => {
      el.addEventListener('click', (e) => {
        const num = e.currentTarget.id.match(/\d+$/)[0];
        scanInput = document.getElementById(`scan-input${num}`);
        scan();
      });
    });

    function scan() {
      startScanning();
    }

    function showScanner() {
      scannerContainer.style.opacity = "1";
      scannerContainer.style.zIndex = "1";
    }

    function hideScanner() {
      scannerContainer.style.opacity = "0";
      scannerContainer.style.zIndex = "-1";
    }

    function startScanning() {
      showScanner();
      if (picker) {
        picker.resumeScanning();
      }
    }

    function stopScanning() {
      hideScanner();
      if (picker) {
        picker.pauseScanning();
      }
    }
    // Configure the library and activate it with a license key
    const licenseKey = "LICENSE_KEY_HERE";
    // Configure the engine location, as explained on http://docs.scandit.com/stable/web/index.html
    const engineLocation = "https://cdn.jsdelivr.net/npm/scandit-sdk@4.x/build"
    ScanditSDK.configure(licenseKey, {
      engineLocation: engineLocation
    });
    const scannerContainer = document.getElementById("scandit-barcode-picker");
    scannerContainer.style.opacity = "0";
    scannerContainer.style.zIndex = "-1";
    let picker;
    // Create & start the picker
    ScanditSDK.BarcodePicker.create(scannerContainer)
      .then(barcodePicker => {
        picker = barcodePicker;
        // Create the settings object to be applied to the scanner
        const scanSettings = new ScanditSDK.ScanSettings({
          enabledSymbologies: ["ean8", "ean13", "upca", "upce", "code128", "code39"]
        });
        picker.applyScanSettings(scanSettings);
        picker.on("scan", scanResult => {
          stopScanning();
          scanInput.value = scanResult.barcodes[0].data;
        });
        picker.on("scanError", error => alert(error.message));
        picker.resumeScanning();
      })
      .catch(alert);

  </script>
</body>
<style>
  #scan:after {
    display: none;
  }

</style>

</html>`

关于javascript - 单击按钮扫描到 elementbyid？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57365351/

24 4 0
文章推荐： java - Guice - 相同返回类型的多个提供者方法
文章推荐： java - PaintComponent 根本不工作
文章推荐： java - 为什么老一代不好？
文章推荐： java - jOOQ:在单个对象中返回带有 join、groupby 和 count 的列表
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com