등록 양식에서 브라우저가 필드를 미리 채우지 않도록하려면 어떻게합니까?

Question

autocomplete="off"은 내가 후진 작업이 아닙니다. 기본적으로, 나의 등록 양식에는 "phone"과 "password"필드가 서로 위에 놓여 있습니다. (스크린 샷 참조)

"phone"필드는 브라우저가하는 것처럼 유저 네임으로 미리 채워져 있습니다 - 브라우저는 비밀번호 입력란을 찾아서 입력하기 전에 바로 입력 필드를 사용합니다 username 필드. 내가 전화 필드에 대한 표준이 아닌 자동 완성 속성에 관심이있는 이유

, 나는 사용자가 가능한 및 경우 쉽게이 양식을 작성 할 수 있도록하려는 않는다는 것입니다 : 효과는 이것이다 그들은 이전에 다른 사이트 ("전화"라고하는 필드)에 자신의 전화 번호를 입력 했으므로 필드에 입력하기 시작하면이 정보가 도움이 될 수 있습니다. 그래서 자동 완성 기능을 사용하지 않으려합니다.

나는 어떻게 든이 동작을 피하기 위해 필드를 재구성하는 방향으로 생각하고있었습니다. 또는 브라우저에 비밀번호 필드 위의 입력란과 아무 관련이 없거나 비밀번호 입력란이 인증 목적으로 사용되지 않는다고 말하면됩니다. 어떻게 든 그것을 그 것으로 표시하십시오. 또는이 두 필드 사이에 보이지 않는 요소를 주입합니까?

아이디어가 있으십니까? 사용

마크 업 :

<input id="phone" name="phone" type="text" value="" maxlength="30"> 
<input id="newPassword" name="newPassword" type="password" value="" maxlength="20"> 

내가 크롬, FF, (IE에 대해 확실하지에이 동작을 얻고, 내 컴퓨터에 그의 오래된 버전을 가지고, 심지어 IE에 대한 걱정을 시작하고 싶지 않아 아직).

Answer 1

대부분의 암호 관리자는 첫 번째 암호 필드와 그 앞에 가장 가까운 텍스트 필드를 검색합니다.

"새 비밀번호"위에 보이지 않는 텍스트와 비밀번호 필드 (display:none)를 추가하기 만하면됩니다.

Firefox tries to interpret 3 password fields "비밀번호 변경"작업이므로 원하지 않으면 다른 보이지 않는 비밀번호 필드를 추가하는 것이 안전해야합니다.

Answer 2

집 번호는 30 자일 수 없습니다. 브라우저가 크기 때문에 사용자 이름 또는 로그인 이메일 일 수 있다고 가정하는 이유 일 수 있습니다. 그것을 실제 무언가로 바꾸고 어떤 일이 일어나는 지보십시오.

또한 전화 번호, 지역 번호, 접두사, 접미사에 3 개의 필드가 있다고 생각하십시오. 특정 자릿수가 채워지면 다음 전화 세그먼트 필드의 JavaScript를 사용하여 자동 초점을 설정할 수 있으므로 사용자가 더 쉽게 사용할 수 있습니다.

입력란의 위치를 ​​변경해 보셨습니까? 무슨 일 이니?

또한 등록 중에 특정 항목에 대한 자동 완성 기능을 해제 할 수 있습니다. 로그인 필드에서 자동으로 꺼내지 않는 한 로그인 중에 꺼지지 않을까 걱정하지 마십시오. , 물론 당신은 할 필요가 없습니다.

또한 사용하지 않은 저장된 양식 자동 완성 항목을 삭제하거나 버전에 로컬 문제가 될 수 있으며 브라우저에서 특정 값을 입력 한 다음 다른 브라우저 (크롬 또는 FF로), 새로 설치 한 브라우저는 원래 브라우저에서와 똑같이 규칙을 복사했습니다. 따라서 나쁜 항목이 하나 뿐이고 두 번째 설치된 브라우저 첫 번째 브라우저에서 잘못된 항목 규칙을 복사하고 복제하여 실제적이고 보편적 인 문제로 보이게 만들었습니까? 따라서 브라우저의 InPrivate 모드를 시도하거나 다른 설치 또는 다른 컴퓨터 또는 사용자가 가질 수있는 가상 PC 인스턴스에서 브라우저를 사용해보십시오.

그렇지 않으면 브라우저에서 설정을 모두 내 보낸 다음 두 브라우저를 모두 제거한 다음 스크래치 FF와 크롬에서 다시 설치 한 다음 웹 페이지를 테스트 한 다음 내 보낸 설정을 다시 가져 오십시오.

또한 통찰력을위한 것이라해도 IE에 대한 테스트를 통해 그것이 무엇을 의미하는지 알 수 있습니까?

희망이 있으면 도움이 되었으면 좋겠다. 다른 궁금한 점이 있으면 알려 주시기 바랍니다.

UPDATE :

당신이 전화 필드를 렌더링 할 때, 입력 태그에 값 = ""속성을 추가한다 할 수있을 대신 사용한다 당신이 선택한 방법, 주어 JavaScript. 이것은 자바 스크립트를 사용할 필요없이 사전 작성이 발생하지 않도록해야합니다.

페이지가로드 될 OnLoad 이벤트 동안 JavaScript를 사용하여 전화 필드를 확인하고 값이 하나의 공백 ("") 인 경우 덮어 씁니다. 자바 스크립트를 사용하여 빈 문자열을 사용하면 onLoad가 트리거됩니다. 또는 브라우저가 여전히 미리 채워지는 경우 (그렇다고하더라도 의심 스럽지만)이 검사를 수백 밀리 초씩 지연하고 페이지가로드 된 후 몇 백 밀리 초를 실행하거나 전체 또는 일부에 연결합니다. 입력 필드 onFocus 이벤트가 있으므로 필드가 포커스를 얻 자마자 "phone.value가 한 칸의 공백 문자 (" ")와 같으면 공백 문자를 덮어 쓰고 빈 문자열을 추가하면됩니다. 특정 브라우저는이 상황에서 해당 필드를 뛰어 넘지 않을 것입니다. 비록 언급 한 바와 같이,이 onLoad를 수행하더라도 페이지/자바 스크립트 onload가 브라우저 내부에서 발생하기 때문에 브라우저가 필드를 가로채는 것을 의심합니다. onLoad (DocumentComplete) 이벤트가 발생하고 최악의 시나리오에서는 수백 밀리 초 지연 또는 onFocus 메서드를 수행 할 수 있지만 이러한 요소가 필요한지 의심 스럽습니다.

알려면

Answer 3

DOM의 로딩 후 입력 필드 유형 = 텍스트 & 유형 = 암호를 사용하지 못하게 시도한 다음 특정 밀리 초 후에 사용 불가능한 모든 필드를 사용 가능하게 설정하면 100이라고 말할 수 있습니다. 나를 위해 작동하는 것 같습니다. 시도 :

$(document).ready(function() 
{ 
$("input[type=text],input[type=password]").prop('disabled','disabled'); 

$("body").delay(10,function(){ 
    $("input[type=text],input[type=password]").prop('disabled',''); 
    }); 
}); 

Answer 4

나는 set password 필드와 비슷한 문제가 있습니다. MDN input 문서에서

<input type="password" autocomplete="new-password"> 

보십시오 :

자동 완성

이 속성은 컨트롤의 값이 브라우저에 의해 자동으로 완료 할 수 있는지 여부를 나타냅니다.

가능한 값은 :

.... 새로운 암호 : 새로운 패스워드 (예를 들면계정을 만들거나 비밀번호를 변경하는 경우)

전화 번호 문제로 설정하고 거기에서 사용자 이름을 자동 완성하지 않았습니다.

<input type="tel">