[JavaScript]IP input mask

IP를 입력받을 때 'xxx.xxx.xxx.xxx'의 형식만 입력이 가능하게 하였다. 

이 때 사용한 것이 미리 정의된 형식을 보장하여 사용자가 입력을 할 수 있도록 도와주는 inputmask 라이브러리이다.

input mask는 그 외 날짜, 숫자, 전화번호 등의 입력하는데에 유용하다.

 

1. 내가 사용한 코드는 다음과 같다.

$("#ip").inputmask({alias: "ip", greedy: false});

...

$("#ip").inputmask('remove');

---

2. 다른 방식의 코드

<label>IP Address</label>
<input type="text" class="form-input" id="ipv4" name="ipv4" placeholder="xxx.xxx.xxx.xxx"/>

 

//input mask bundle ip address
var ipv4_address = $('#ipv4');
ipv4_address.inputmask({
    alias: "ip",
    greedy: false //The initial mask shown will be "" instead of "-____".
});

 

 

참고: https://codepen.io/_marcba/pen/JjXRNbV

input mask ip address

---

3. 추가로 다를 조건의 예제들

$(document).ready(function(){
  $(selector).inputmask("99-9999999");  //static mask
  $(selector).inputmask({"mask": "(999) 999-9999"}); //specifying options
  $(selector).inputmask("9-a{1,3}9{1,3}"); //mask with dynamic syntax
});

 

아래 참고 링크의 내용을 보면 숫자만, 숫자 조건부여 등 그 외에 예제들을 다뤘다.

---

4. 그리고 추가로 maskip을 사용하는 방법도 있다고 한다.

https://kdarkdev.tistory.com/78

jQuery Plugin - maskip (input box에 ip형식 or 일정한 형식만 입력 가능하게 하는 플러그인)

뿐만 아니라 ip validator도 존재하여 수월하게 사용할 수 었었다.

https://formvalidation.io/guide/validators/ip/

The best validation library for JavaScript. No dependency. Supports popular frameworks including Bootstrap, Zurb Foundation, Pur

FormValidation
	.formValidation(
                form,
                {
                    fields: {
                        input_ip: {
                            validators: {
                                notEmpty: {
                                    message: 'IP 를 입력하세요.',
                                    trim: true
                                },
                                ip: {
                                    message: 'IP 형식으로 입력하세요.',
                                    ipv4: true
                                },

 

---

5. 참고

https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=sks6624&logNo=220939895520 

jQuery plugin inputmask.js

예제 : https://github.com/RobinHerbots/Inputmask

GitHub - RobinHerbots/Inputmask: Input Mask plugin