Автоматическая генерация QR-кода из входного идентификатора = "message2" без необходимости нажатия пользователем чего-либо дополнительного

#javascript #api #input #qr-code

#javascript #API #ввод #qr-код

Вопрос:

Я пытаюсь автоматически сгенерировать qr-код из id =»message2″, но он продолжает возвращаться как неопределенный.

      function generateBarCode()
            {
                var nric = $('#text').val();
                var url = 'https://api.qrserver.com/v1/create-qr-code/?data='   nric   'amp;amp;size=50x50';
                $('#barcode').attr('src', url);
            }

 <div>
            <div class="form-group">
                <div class="input-group mb-3" style="max-width: 400;">
                    <input style="color: blue;" type="text" class="form-control input-message2" id="new-myInput" value="" readonly="" onclick="select()" input="message2">
                        <div class="input-group-append">
                            <button onclick="myFunction()" class="btn btn-primary copyit" data-clipboard-target="#address"><i class="far fa-copy"></i> Copy </button>
                               
                    </div>
                </div>
            </div>
        </div>
        
        
        <br>
    
    
        
        <input id="new-myInput" id="text" value="" input="message2" style="Width:100%" onblur='generateBarCode();' /> 

      <img id='barcode' 
            src="https://api.qrserver.com/v1/create-qr-code/?data=HelloWorldamp;amp;size=100x100" 
            alt="" 
            title="Your Message In QR" 
            width="100" 
            height="100" />

Нет необходимости во втором вводе, я просто пытаюсь заставить qr-код автоматически генерироваться из текста, который извлекается из этой строки <input style="color: blue;" type="text" class="form-control input-message2" id="new-myInput" value="" readonly="" onclick="select()" input="message2"> , но, конечно, он не отображается в фрагменте кода, я использую Laravel 5

1. У вас не должно быть amp;amp; строки URL; это должно быть простое amp; . Также вы должны передать текстовое содержимое (), прежде чем объединять его в URL. nric encodeURIComponent()

2. Также вам не нужно использовать .attr() ; было бы лучше использовать .prop() для установки «src».

3. @Pointy не могли бы вы помочь в этом случае, удалив необходимые вещи, пожалуйста

4. Также у вас <input> есть два значения «id».

5. Могу ли я объединить эти идентификаторы в один с пробелом?

Ответ №1:

Несколько вещей:

В домене JavaScript нет необходимости экранировать amp; строку. Другими словами, вам не нужно amp;amp; ; это должно быть просто «amp;».
Текст для отправки в службу QR должен быть закодирован для URL-адреса путем передачи его через encodeURIComponent()
Ваш текст <input> имеет два значения «id», поэтому поиск jQuery его не найдет.

Ваша функция должна выглядеть следующим образом:

  function generateBarCode() {
   var nric = $('#text').val();
   var url = 'https://api.qrserver.com/v1/create-qr-code/?data='   
       encodeURIComponent(nric)   
       'amp;size=50x50';
   $('#barcode').prop('src', url);
 }

1. Я должен добавить, что иногда вам может потребоваться экранирование сущности HTML в строках JavaScript; это зависит от того, что будет делать строка. Это не один из таких случаев.

2. Спасибо, сейчас это работает, но я должен ввести данные, а затем щелкнуть по полю ввода, чтобы заставить его сгенерировать QR, поэтому я думаю, что теперь проблема в том, что message2 автоматически преобразуется в QR-код, но спасибо @pointy

3. Вы должны отключить ввод, потому что именно так вы разработали инструмент; ввод вызывает функцию при событии «размытие», которое происходит, когда поле теряет фокус.

4. Я вижу, я пытаюсь найти альтернативы или просто полностью удалить это и изменить его с помощью jquery для каждого введенного символа

5. Вы могли видеть, будет ли переключение на oninput вместо onblur делать то, что вы хотите.