BARCODE 만들기 barcode.js

barcode.js를 이용해 띄우기

우선 보기좋게하기위해 최소한의 css를 지정한다.

  <style>
  #barcode {display: block;margin: 0 auto;}
  #textInput {width: 190px;text-align: center; display:block; margin: 0 auto 20px;}
  </style>

 

값이 들어갈 input, barcode가 만들어질 div를 만든다.

<input type="text" value="1234567890123" id="textInput" />
  <div id="barcode"></div>

 

jquery연결 후, barcode.js연결

<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="crossorigin="anonymous"></script>
<script src='https://www.jqueryscript.net/demo/Simple-jQuery-Based-Barcode-Generator-Barcode/jquery-barcode.js'></script>

 

 

스크립트 추가. 끝.

<script>
  $('#textInput').on('keyup', function () {
      $("#barcode").barcode(
        this.value,
        "code39",
        {
          barWidth: 2,
          barHeight: 100,
          fontSize: 14
        }
      );
    });

    $('#textInput').trigger('keyup');

</script>

 

아래와 같은 결과물을 볼 수 있다.

 

license.txt

0.00MB

 

 

 

 

 

 

https://standout.tistory.com/222

BARCODE 만들기 barcode.tec-it.com