기존 규칙 ~ 데모에 갈 때는 먼저 재미있을 것입니다 : 6 자리 문자 암호 입력 장치
그런 다음 소스 코드를 추가하십시오 : 6 자리 문자 비밀번호 인퍼를 추가하십시오
데모에서 먼저 6 자만 입력 할 수 있으며 숫자 만 입력 할 수 있음을 알 수 있습니다. 6 자리의 입력이 완료되면 콜백이 자동으로 실행됩니다 (입력 결과는 데모에 표시됩니다)
1. 먼저 원리에 대해 이야기합시다
우선, 우리는 두 가지가 필요합니다. 하나는 실제 입력 상자입니다. 즉, 실제로 초점을 맞추고 사용자로부터 입력 입력을 얻습니다. 다른 하나는 의사 입력 상자 세트입니다. 즉, 실제로 초점을 얻지는 않지만 현재 입력 한 값 만 표시합니다 (물론 암호는 단지 작은 검은 점 ~).
둘째, 우리는 단순하고 그것을 두려워하지 않아야하므로 (6) 가짜 요소 세트가 실제 입력 상자 바로 아래에 겹치도록 허용합니다. 다음과 같이 :
실제로 마진이 없습니다 ~, 더 명확하게보기 위해.
또한 최상위 레벨 실제 입력 상자를 0으로 설정하여 사용자에게 제시된 것이이 가짜 입력 상자 세트가되도록해야합니다.
그러나 사용자가 다시 들어가면 여전히 실제 입력 상자에서 작동합니다. 그 후, 우리는 사용자의 입력을 위조 입력 상자에 채 웁니다 ~
아주 간단한 ~
2. 코드 코드
먼저 개별 DOM이 초기화되고 입력 이벤트가 바인딩됩니다.
함수 init (fun) {var that = that; this; this.callback = fun; that.realinput = container.children [0]; that.bogusinput = 컨테이너 [1]; that.bogusinputarr = that.bogusinput.children; that.maxlength = that.bogusinputarr [0]. function () {that.setValue ();} that.realInput.onPropertyChange = function () {that.setValue ();}}그런 다음 사용자 입력을 입력하면 사용자 입력이 각각 위조 입력 상자에 입력됩니다.
function setValue () {this.realinput.value = this.realInput.value.replace (// d/g, ""); console.log (this.realinput.value.replace (// d/g, ""))) var real_st = this.realinput.value; for <this.maxl 길이; i ++) {this.bogusinputarr [i] .value = real_str [i]? real_str [i] : "";} if (real_str.length> = this.maxlength) {this.realinput.value = real_str.substring (0,6); this.callback ();}}마지막으로, 우리는 비밀번호를 가져와야합니다 ~, 최종 가치를 얻는 메소드를 가져 오겠습니다 ~
함수 getBoxInputValue () {var realValue = ""; for (var i this.BogusInputArr) {if (! this (! this.bogusInputarr [i] .Value)) {break;} realValue += this.BogusInputAr [value;} retud realValue;}.위의 것은 편집기가 소개 한 6 자리 문자 암호 입력 함수의 JS 구현입니다. 모든 사람에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 모든 사람에게 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!