javascript - 使用输入字段中的值，其中值是返回表单 JS

Question

案例:

我正在尝试构建一个 qr 阅读器来查找值，请参阅 here :

有效方法:扫描。如果我扫描代码，文本框中会返回一个值。使用的代码:

<script type="text/javascript" src="https://www.meijerit.be/qr_packed.js"></script>
<input type=text id="qr-result" class=qrcode-text placeholder="Tank ID code"><label class=qrcode-text-btn>
    <input type=file accept="image/*" capture=environment onclick="return showQRIntro();" onchange="openQRCamera(this);" tabindex=-1>
</label>

<script type="text/javascript">
    function openQRCamera(node) {
        var reader = new FileReader();
        reader.onload = function() {
            node.value = "";
            qrcode.callback = function(res) {
                if (res instanceof Error) {
                    alert("Geen QR-code gevonden. Zorg dat de code volledig in beeld is en probeer het opnieuw.");
                } else {
                    node.parentNode.previousElementSibling.value = res;
                }
            };
            qrcode.decode(reader.result);
        };
        reader.readAsDataURL(node.files[0]);
    }

    function showQRIntro() {
        return confirm("Gebruik de camera om een foto van de QR-code te maken.");
    }
</script>

什么也有效:从 qr-result 获取值并在手动输入时放入查找字段:

<script type="text/javascript">
    jQuery(document).ready(function($) {
        $('#qr-result').change(function() {
            var sourceField = $('#qr-result').val();
            $('#field_b9ip5').val(sourceField);
            $('#field_b9ip5').trigger({
                type: 'change',
                originalEvent: 'custom'
            });
        });
    });
</script>

问题是什么以及我的问题是什么:

如果我手动在 qr-result 中输入一个值，该值将在 TankID 字段 (field_b9ip5) 中使用并在后端查找。

但是，当我扫描二维码时，脚本返回扫描的值，但由于某种原因，jQuery 脚本不会拾取它进行进一步处理。

有人可以指出我在不手动输入时如何使用 qr-result 中的值的正确方向吗？

提前致谢!

Answer 1

我刚刚遇到了类似的问题，我认为这应该可以解决它。解决方案是向脚本显示输入值已更改的事实。试试这个:

if (res instanceof Error) {
  alert("Geen QR-code gevonden. Zorg dat de code volledig in beeld is en probeer het opnieuw.");
} else {
  node.parentNode.previousElementSibling.value = res;
  node.parentNode.previousElementSibling.dispatchEvent(new Event('change'));
  // ^^ Use dispatchEvent() to trigger a change event
}

您需要插入更改事件，因为不会接受程序化更改。