Programing

Chrome에서 자동 완성을 실행하는 방법은 무엇입니까?

lottogame 2020. 5. 19. 08:06
반응형

Chrome에서 자동 완성을 실행하는 방법은 무엇입니까?

특정 양식에 Chrome 자동 완성 기능을 사용하기위한 특별한 마크 업이 있는지 알고 싶습니다. 사용 중지 방법에 대한 질문 만 찾았지만 브라우저에 "주소 입력"또는 "우편 번호 입력"이라고 알리기 위해 HTML 코드에 태그를 추가 할 수 있는지 알고 싶습니다. 필드 '를 올바르게 입력합니다 (사용자가이 기능을 활성화했다고 가정).

2017 년 업데이트 : Katie의 답변이 내 것보다 최신 정보를 가지고있는 것 같습니다. 미래 독자 : 그녀의 답변에 투표를하십시오 .

이것은 훌륭한 질문이며 문서를 제공하기가 매우 어려운 질문입니다. 실제로 대부분의 경우 Chrome 자동 완성 기능이 "작동하는 것"임을 알 수 있습니다. 예를 들어, 다음 HTML 스 니펫은 적어도 나 (Chrome v. 18)의 첫 번째 필드를 클릭 한 후 자동으로 채워지는 양식을 생성합니다.

<!DOCTYPE html>
<html>
<body>    
<form method="post">
  First name:<input type="text" name="fname" /><br />
  Last name: <input type="text" name="lname" /><br />
  E-mail: <input type="text" name="email" /><br />
  Phone: <input type="text" name="phone" /><br />
  Address: <input type="text" name="address" /><br />
</form>
</body>
</html>

그러나이 답변은 "매직"영역에 솔루션을 남겨 두므로 만족스럽지 않습니다. 더 깊이 파고 들어 크롬 (및 기타 자동 완성 브라우저)은 주로 폼 요소에 채워야하는 데이터 유형을 결정하기 위해 상황에 맞는 단서에 의존한다는 것을 알게되었습니다. 이러한 맥락 단서의 예로 name는 입력 요소, 요소를 둘러싼 텍스트 및 자리 표시 자 텍스트가 있습니다.

그러나 최근 Chrome 팀은 이것이 불만족스러운 솔루션임을 인정했으며이 문제에 대한 표준화를 요구하기 시작했습니다. Google 웹 마스터 그룹의 유익한 게시물 에서 최근이 문제에 대해 다음과 같이 설명했습니다.

불행히도, 지금까지 웹 마스터는 Chrome 및 기타 양식 작성 제공 업체가 양식을 올바르게 구문 분석 할 수 있도록하기가 어려웠습니다. 일부 표준이 존재합니다. 그러나 그들은 웹 사이트 구현에 큰 부담을 주므로 실제로 많이 사용되지는 않습니다.

(그들이 참조하는 "표준"은 위의 Avalanchis의 답변에 언급 된 사양의 최신 버전입니다 .)

Google 게시물은 제안 된 솔루션을 설명합니다 (이 게시물의 의견에서 상당한 비판으로 충족 됨). 이 목적을 위해 새로운 속성을 사용할 것을 제안합니다.

입력 요소에 속성을 추가하기 만하면됩니다. 예를 들어 이메일 주소 필드는 다음과 같습니다.

<input type=”text” name=”field1” x-autocompletetype=”email” />

... x-"실험"을 의미하며 이것이 표준이되면 &가 제거됩니다. 자세한 내용 은 게시물 을 읽 거나 더 깊이 파고 싶다면 whatwg wiki 에서 제안 에 대한 자세한 설명을 찾을 수 있습니다.

업데이트 : 이 통찰력있는 답변 에서 지적했듯이 Chrome이 공통 필드를 식별 / 인식하는 데 사용하는 모든 정규 표현식은에서 찾을 수 있습니다 autofill_regex_constants.cc.utf8. 따라서 원래 질문에 답하려면 html 필드의 이름이이 표현식과 일치하는지 확인하십시오. 몇 가지 예는 다음과 같습니다.

  • 이름: "first.*name|initials|fname|first$"
  • 성: "last.*name|lname|surname|last$|secondname|family.*name"
  • 이메일: "e.?mail"
  • 주소 라인 1): "address.*line|address1|addr1|street"
  • 우편 번호: "zip|postal|post.*code|pcode|^1z$"

이 질문은 꽤 오래되었지만 업데이트 된 답변이 있습니다 !

다음은 자동 완성을 활성화하기위한 WHATWG 설명서에 대한 링크입니다.

Google은 휴대 기기에 친숙한 웹 애플리케이션을 개발하기위한 훌륭한 안내서 를 작성했습니다 . 자동 채우기를 쉽게 사용할 수 있도록 양식의 입력 이름을 지정하는 방법에 대한 섹션이 있습니다. 모바일 용으로 작성되었지만 데스크톱과 모바일 모두에 적용됩니다!

HTML 양식에서 자동 완성을 활성화하는 방법

자동 완성을 활성화하는 방법에 대한 몇 가지 주요 사항은 다음과 같습니다.

  • <label>모든 <input>분야에 a 를 사용하십시오.
  • autocomplete<input>태그에 속성 을 추가 하고이 안내서 를 사용하여 채우십시오 .
  • 모든 태그의 이름 name과 autocomplete속성 이름을 올바르게 지정하십시오<input>

  • 예 :

    <label for="frmNameA">Name</label>
<input type="text" name="name" id="frmNameA"
placeholder="Full name" required autocomplete="name">

<label for="frmEmailA">Email</label>
<input type="email" name="email" id="frmEmailA"
placeholder="name@example.com" required autocomplete="email">

<!-- note that "emailC" will not be autocompleted -->
<label for="frmEmailC">Confirm Email</label>
<input type="email" name="emailC" id="frmEmailC"
placeholder="name@example.com" required autocomplete="email">

<label for="frmPhoneNumA">Phone</label>
<input type="tel" name="phone" id="frmPhoneNumA"
placeholder="+1-555-555-1212" required autocomplete="tel">

<input>태그 이름을 지정하는 방법

자동 완성을 실행하려면 태그 에서 name및 autocomplete속성의 이름을 올바르게 지정 해야 <input>합니다. 그러면 양식에서 자동 완성이 자동으로 허용됩니다. 또한 가지고 있어야합니다 <label>! 이 정보는 여기 에서도 찾을 수 있습니다 .

입력 이름을 지정하는 방법은 다음과 같습니다.

  • 이름
    • 다음 중 하나를 사용하십시오 name.name fname mname lname
    • 다음 중 하나를 사용하십시오 autocomplete.
      • name (이름)
      • given-name (이름)
      • additional-name (중간 이름)
      • family-name (성)
    • 예: <input type="text" name="fname" autocomplete="given-name">
  • 이메일
    • 다음 중 하나를 사용하십시오 name.email
    • 다음 중 하나를 사용하십시오 autocomplete.email
    • 예: <input type="text" name="email" autocomplete="email">
  • 주소
    • 다음 중 하나를 사용하십시오 name.address city region province state zip zip2 postal country
    • 다음 중 하나를 사용하십시오 autocomplete.
      • 하나의 주소 입력의 경우 :
        • street-address
      • 두 개의 주소 입력의 경우 :
        • address-line1
        • address-line2
      • address-level1 (국가 또는 지방)
      • address-level2 (시티)
      • postal-code (우편 번호)
      • country
  • 전화
    • 다음 중 하나를 사용하십시오 name.phone mobile country-code area-code exchange suffix ext
    • 다음 중 하나를 사용하십시오 autocomplete.tel
  • 신용 카드
    • 다음 중 하나를 사용하십시오 name.ccname cardnumber cvc ccmonth ccyear exp-date card-type
    • 다음 중 하나를 사용하십시오 autocomplete.
      • cc-name
      • cc-number
      • cc-csc
      • cc-exp-month
      • cc-exp-year
      • cc-exp
      • cc-type
  • 아이디
    • 다음 중 하나를 사용하십시오 name.username
    • 다음 중 하나를 사용하십시오 autocomplete.username
  • 비밀번호
    • 다음 중 하나를 사용하십시오 name.password
    • 다음 중 하나를 사용하십시오 autocomplete.
      • current-password (로그인 양식)
      • new-password (가입 및 비밀번호 변경 양식)

자원

내 테스트에서 x-autocomplete태그는 아무것도하지 않습니다. 대신 autocomplete입력 태그에 태그를 사용하고 http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms HTML 사양에 따라 값을 설정 하십시오. html # autofill-field .

예:

<input name="fname" autocomplete="given-name" type="text" placeholder="First Name" required>

부모 양식 태그에는 autocomplete = "on"및 method = "POST"가 필요합니다.

브라우저가 자동으로 채우도록 요소 이름을 적절하게 지정해야합니다.

이에 대한 IETF 사양은 다음과 같습니다.

http://www.ietf.org/rfc/rfc3106.txt 1

I just played arround with the spec and got a nice working example - including a few more fields.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>

  <form autocomplete="on" method="POST">

    <fieldset>
        <legend>Ship the blue gift to...</legend>
        <p>
            <label> Firstname:
<input name="fname" autocomplete="section-blue shipping given-name" type="text"  required>
            </label>
      </p>
        <p>
            <label> Lastname:
<input name="fname" autocomplete="section-blue shipping family-name" type="text" required>
            </label>
      </p>

        <p>
            <label> Address: <input name=ba
                autocomplete="section-blue shipping street-address">
            </label>


      </p>
        <p>
            <label> City: <input name=bc
                autocomplete="section-blue shipping address-level2">
            </label>

      </p>
        <p>
            <label> Postal Code: <input name=bp
                autocomplete="section-blue shipping postal-code">
            </label>
      </p>

    </fieldset>
    <fieldset>
        <legend>Ship the red gift to...</legend>
        <p>
            <label> Firstname:
<input name="fname" autocomplete="section-red shipping given-name" type="text" required>
            </label>
      </p>

        <p>
            <label> Lastname:
<input name="fname" autocomplete="section-red shipping family-name" type="text" required>
            </label>
      </p>
        <p>
            <label> Address: <input name=ra
                autocomplete="section-red shipping street-address">
            </label>
      </p>


        <p>
            <label> City: <input name=bc
                autocomplete="section-red shipping address-level2">
            </label>

      </p>

        <p>
            <label> Postal Code: <input name=rp
                autocomplete="section-red shipping postal-code">
            </label>
      </p>

    </fieldset>

        <fieldset>
        <legend>payment address</legend>
        <p>
            <label> Firstname:
<input name="fname" autocomplete="billing given-name" type="text" required>
            </label>
      </p>

        <p>
            <label> Lastname:
<input name="fname" autocomplete="billing family-name" type="text" required>
            </label>
      </p>
        <p>
            <label> Address: <input name=ra
                autocomplete="billing street-address">
            </label>
      </p>


        <p>
            <label> City: <input name=bc
                autocomplete="billing address-level2">
            </label>

      </p>

        <p>
            <label> Postal Code: <input name=rp
                autocomplete="billing postal-code">
            </label>
      </p>

    </fieldset>
    <input type="submit" />
</form>

</body>
</html>

JSBIN

It contains 2 separate address areas and also differen address-types. Tested it also on iOS 8.1.0 and it seems that it always fill all fields at once, while desktop chrome autofill address by address.

Looks like we'll get more control about this autofill feature, there is a new experimental API coming to Chrome Canary, which can be used to access the data after asking the user for it:

http://www.chromium.org/developers/using-requestautocomplete http://blog.alexmaccaw.com/requestautocomplete

new infos by google:

http://googlewebmastercentral.blogspot.de/2015/03/helping-users-fill-out-online-forms.html

https://developers.google.com/web/fundamentals/input/form/label-and-name-inputs#use-metadata-to-enable-auto-complete

Here it is the real answer:

The only difference is in the label itself. The "Nom" cames from "Name" or "Nome" in portuguese.

So here is what you need:

  • A form wrapper;
  • A <label for="id_of_field">Name</label>
  • An <input id="id_of_field"></input>

Nothing more.

Google now provides documentation for this:

Help users checkout faster with Autofill | Web | Google Developers

and

Create Amazing Forms: Use metadata to enable auto-complete | Web | Google Developers

Here is the new list of Google Autofill "names". There are all the supported names in any allowed language.

autofill_regex_constants.cc

In my case, $('#EmailAddress').attr('autocomplete', 'off'); is not worked. But following works on chrome Version 67 by jQuery.

$('#EmailAddress').attr('autocomplete', 'new-email');
$('#Password').attr('autocomplete', 'new-password');

참고URL : https://stackoverflow.com/questions/7223168/how-to-trigger-autofill-in-google-chrome

반응형

'Programing' 카테고리의 다른 글

명령 줄에서 .NET Core 콘솔 앱을 실행하는 방법  (0) 2020.05.19
React Native를 사용할 때 데이터를 저장하는 옵션은 무엇입니까?  (0) 2020.05.19
제목 속성에서 큰 따옴표를 이스케이프 처리하는 방법  (0) 2020.05.19
“파일 끝에 줄 바꿈 없음”컴파일러 경고  (0) 2020.05.19
Java java.lang.Class에 해당하는 스칼라  (0) 2020.05.19

'Programing'의 다른글

  • 현재글Chrome에서 자동 완성을 실행하는 방법은 무엇입니까?

관련글

댓글

티스토리툴바