jQueryでQRコードを生成してくれるプラグイン

2019.10.17 ブラウザを閉じてもQRコードが表示されるよう改良しました。

スマホサイト制作において実機での確認は必須ですね。
確認するときはQRコードを生成して確認することが多いのですが、複数サイト確認したいときにQRコードが一覧になってると楽だなぁと思うことがあったのでjQueryのプラグインを使ってみました。

■作ったページ
https://thisisstandarz.com/webapp/qrcode/
フォームにURLを入力すれば自動でQRコードが生成されます。

ぜひお試しください。

    <div id="input">
      <div class="unit">
        <input name="url[]" type="url" class="code0" placeholder="https://" />
        <span class="minus btn btn-primary">- 削除する</span>
      </div>
    </div>

    <div id="plus" class="btn btn-danger">+ フォームを追加する</div>

    <div id="result">
        <ul id="qr">
            <li class="code0"><p></p></li>
        </ul>
    </div>
</div>

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="jquery.qrcode.min.js"></script>
<script>
var minCount = 1;
var maxCount = 9999;

$(function(){
    //追加ボタンを押したとき
    $('#plus').on('click', function(){
        //フォーム追加
        var inputCount = $('#input .unit').length;
        if (inputCount < maxCount){
            var element = $('#input .unit:last-child').clone(true);
            var inputList = element[0].querySelectorAll('input[type="url"]');
            for (var i = 0; i < inputList.length; i++) {
                inputList[i].value = "";
            }
            $('#input .unit').parent().append(element);

            //QRコードのresultにliを追加する
            $('<li class="code'+inputCount+'"><p></p></li>').appendTo("#qr");
            //追加したフォームにclass名を追加する
            $("#input .unit:last input").prop("class", "code"+inputCount);
        }
    });
    //削除ボタンを押したとき
    $('.minus').on('click', function(){
      var inputCount = $('#input .unit').length;
      if (inputCount > minCount){
        $(this).parents('.unit').remove();
      }
    });

    //フォームにURLが入力されたらQRコードを生成する
    $(".unit input").on("focusout", function(){
        var url = $(this).val();
        var num = $(this).prop("class");
        if(url !== ""){
            jQuery('#qr li.'+num).qrcode({width: 120, height: 120, text: url});
            $('#qr li.'+num+' p').text(url);
        }
    });
});


</script>

■参考サイト
http://webliker.info/how-to-use-localstrage/
https://jeromeetienne.github.io/jquery-qrcode/
https://qiita.com/horikeso/items/d000f765dfbf60c6a6a2