使用輸入字段中的值，其中值是返回表單 JS

Question

案件：

我正在嘗試構建一個 qr-reader 來查找值，請參見此處：

什么工作：掃描。 如果我掃描代碼，則會在文本框中返回一個值。 使用的代碼：

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

您需要推動更改事件，因為不會選擇程序化更改。