[html] React는 자동 완성을 렌더링하지 않습니다.

Program / 글쓴이

반응을 렌더링하려면 어떻게해야합니까?

<input
    id={field.name}
    className="form-control"
    type="text"
    placeholder={field.name}
    autocomplete="off"
    {...field}/>

답변

대문자 “C” autoComplete. 이것은 React 문서에 언급되어 있습니다.

https://facebook.github.io/react/docs/tags-and-attributes.html

답변

다음을 넣어야합니다. 

autoComplete="new-password"

자동 완성이 제거됩니다.

답변

Mozilla 문서 에 따르면 자동 완성 기능을 실제로 해제하려면 잘못된 값을 설정해야합니다. 일부 브라우저에서는 속성이 꺼짐으로 설정되어 있어도 자동 완성 제안이 계속 제공됩니다.

이것은 나를 위해 일했습니다 (react-bootstrap).

<FormControl
  value={this.state.value}
  autoComplete="nope"
  {...props}
/>

답변

정답을 읽었으나 여전히이 문제가있는 경우 (특히 Chrome에서) 클럽에 오신 것을 환영합니다 … 그러니 어떻게 수행했는지 확인하십시오.

<form autoComplete="new-password" ... >
        <input name="myInput" type="text" autoComplete="off" id="myInput" placeholder="Search field" />
</form>

메모

  • form이 반드시 입력 요소의 직접 부모 일 필요는 없습니다.
  • 입력에는 이름 속성이 필요합니다.
  • 또한 React-Bootstrap <FormControl/>태그 와 함께 작동합니다 (대신 <input/>).

답변

이 솔루션 중 어느 것도 Chrome 80에서 실제로 작동하지 않았습니다.

몇 시간의 시행 착오 끝에 매우 이상한 해킹이 저에게 효과적이었습니다.

  1. autoComplete="none"각각에 추가 <input>-Google은 이제 autocomplete = “off”를 건너 뜁니다.
  2. 컨테이너에 필드를 래핑합니다. <form>또는<div>
  3. 와 함께 유효한 입력 필드가 하나 이상 필요합니다 autoComplete="on". 컨테이너의 마지막 요소 여야합니다. 그래서 양식 하단에 다음 입력 필드를 추가했습니다.
<input
  type="text"
  autoComplete="on"
  value=""
  style={{display: 'none', opacity: 0, position: 'absolute', left: '-100000px'}}
  readOnly={true}
/>

답변

autoComplete = “none”-저에게 적합합니다.

답변

Chrome 자동 완성 지옥은 new-password 속성을 추가하여 해제됩니다.

autoComplete="new-password"

실제로는 다음과 같습니다.

<input
type="password"
autoComplete="new-password"
/>

더 많은 토론 :

Chrome 자동 완성 토론