JAVASCRIPT : INPUT 아이디, 패스워드 자동완성(AUTOCOMPLETE) 제거 방법

JAVASCRIPT : INPUT 아이디, 패스워드 자동완성(AUTOCOMPLETE) 제거 방법

 

<h1>Prevent Chrome etc. from autofilling in password and login fields.</h1>
<h2>using readonly-attribute and remove it on focus (touch, tab, click)</h2>
<h2>(now with fix for mobile Safari to show virtual keyboard)</h2>
<form>
  <label for="email">E-Mail</label>
  <input id="email" readonly type="email" onfocus="if (this.hasAttribute('readonly')) { this.removeAttribute('readonly');
    // fix for mobile safari to show virtual keyboard
    this.blur();    this.focus();  }" />
  <br/>
  <label for="pw">Password</label>
  <input id="pw" readonly type="password" onfocus="if (this.hasAttribute('readonly')) { this.removeAttribute('readonly');
    // fix for mobile safari to show virtual keyboard
    this.blur();    this.focus();  }" />
  <br/>
  <input type="submit" value="Go!" />
</form>

 

 

테스트 

 

 

https://jsfiddle.net/danielsuess/n0scguv6/

Prevent Browser From Autofill Password Fields - JSFiddle - Code Playground

 

 

 

활용해 보자!!

<div class="form-group">                                                        
    <input id="UserName" name="UserName" readonly type="text" maxlength="20" onkeyup = "RemoveKor(this)" class="form-control" placeholder="아이디 입력" onfocus="if (this.hasAttribute('readonly')) { this.removeAttribute('readonly'); this.blur();this.focus();  }" />
</div>
<div class="form-group">                            
    <input id="Password" name="Password" readonly type="password" maxlength="20" class="form-control" placeholder="비밀번호 입력" onfocus="if (this.hasAttribute('readonly')) { this.removeAttribute('readonly'); this.blur();this.focus();  }" />
</div>

/**********************************************************************************************
* 작성목적 : 한글제거
**********************************************************************************************/
function RemoveKor(obj) {
    var regexp = /[ㄱ-ㅎ|ㅏ-ㅣ|가-힝]/g; // 한글제거
    obj.value = obj.value.replace(regexp, '');
}

 

 

참고 사이트

 

https://guseowhtjs.tistory.com/entry/%EC%9B%B9-%EC%96%91%EC%8B%9D-%ED%95%84%EB%93%9C%EC%9E%85%EB%A0%A5-%ED%83%9C%EA%B7%B8%EC%97%90%EC%84%9C-%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%EC%9E%90%EB%8F%99-%EC%99%84%EC%84%B1%EC%9D%84-%EC%96%B4%EB%96%BB%EA%B2%8C-%EB%B9%84%ED%99%9C%EC%84%B1%ED%99%94%ED%95%A9%EB%8B%88%EA%B9%8C?category=1009236 

웹 양식 필드/입력 태그에서 브라우저 자동 완성을 어떻게 비활성화합니까?