반응으로 자동 완성이 꺼지지 않음

반응으로 자동 완성이 꺼지지 않음

리액션으로 렌더링하려면 어떻게 해야 하나요?

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

대문자 "C"autoComplete이는 React 매뉴얼에 기재되어 있습니다.

https://reactjs.org/docs/dom-elements.html#all-supported-html-attributes

다음 항목을 입력해야 합니다.

autoComplete="new-password"

그러면 자동 완성이 제거됩니다.

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

이것은 나에게 효과가 있었다(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>

메모들

• 형식은 반드시 입력 요소의 직접 부모일 필요는 없습니다.
• 입력에 이름 속성이 필요합니다.
• React-Bootstrap에서도 동작합니다.<FormControl/>태그(태그 포함)<input/>)

여기 "It works on my machine"이 있습니다.

크롬 버전 83.0.4103.116 및 리액트.폼에 넣고 auto Complete 속성을 추가하는 방법이 효과가 있었던 것 같습니다.주의: 비반응 앱에서 이 작업을 시도하면 소문자 C로 자동 완성해야 합니다.

 <form autoComplete="off">
      <input type="text" autoComplete="new-password" />
 </form>

그리고.

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

이 솔루션들 중 어느 것도 크롬 80에서는 제대로 작동하지 않았다.

몇 시간 동안 시행착오를 거듭한 끝에 이 매우 이상한 해킹이 나에게 효과가 있었다.

1. 더하다autoComplete="none"각자에게<input>- Google은 지금 자동 완성="끄기"를 건너뜁니다.
2. 컨테이너에 필드를 랩합니다.<form>또는<div>
3. 적어도 1개의 유효한 입력 필드가 필요합니다.autoComplete="on". 이것이 컨테이너의 마지막 요소여야 합니다.그래서 양식 하단에 다음 입력 필드를 추가했습니다.

<input 
  type="text" 
  autoComplete="on" 
  value="" 
  style={{display: 'none', opacity: 0, position: 'absolute', left: '-100000px'}} 
  readOnly={true}
/>

autocomplete="none" - 작동 가능.

대부분의 제안은 2020년 12월에 실패했다.모두 시도해 본 것 같습니다.폼 래퍼, 자동 완성 설정 또는off또는newpassword(어느쪽도 작동하지 않음), onFocus 사용, 사용autoComplete리액트(Respect로autocomplete하지만 아무도 도와주지 않았어요

결국 mscott2005의 접근방식은 (+1)로 작동했지만, 저는 다른 사람들에게 답변으로 게시하는 보다 최소한의 예시로 수정했습니다.

형식은 필요 없고, 2개의 입력 태그만 있습니다.

• autocomplete="off"대상 필드:

  <input autoComplete="off" />
  

• autocomplete="on"가짜 숨김 필드:

  <input autoComplete="on" style={{ display: 'none' }}
      id="fake-hidden-input-to-stop-google-address-lookup">
  

이 아이디는 제가 가지고 있는 최고의 아이디입니다. 코멘트를 사용하지 않고 해킹을 할 수 있는 문서입니다.

new-password Atribut을 추가하여 Chrome 자동완료hell이 꺼집니다.

autoComplete="new-password"

동작은 다음과 같습니다.

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

자세한 내용은 이쪽:

Chrome 자동 완성 토론

가 ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★를 존중하지 않습니다.autocomplete='off'페이지 비밀번호를 저장한 경우. ★★autocomplete='off'프로젝트에서 프로젝트를 새로 고친 다음 브라우저에서 저장된 암호를 제거합니다.

@@azium의 답변은<input> 안에 넣어야 합니다.<form> 그 다음에 "tag", "tag"autoComplete

먼저 자동 완료 기능에서 값이 나오는지 확인합니다.

function isValueComingFromAutoComplete(_value, field) {
  return _value.length > 1 && inputs[field].value === "";
}

그런 다음 조건을 추가합니다.

function handleInputChange(_value, field) {
  if (!isValueComingFromAutoComplete(_value, field)) {
     // change state
  }
}

입력값의 길이가 1이면 동작하지 않습니다.

내 EMail 필드와 Password 필드가 브라우저에 의해 autoCompleted인 경우 렌더링 상의 두 필드의 초기값을 덮어쓰고 있었습니다.음, 3일 이상 아무 것도 안 먹혔어요. 모든 옵션을 시도해보는 것에 질렸어요.그리고 BROWER가 이메일과 비밀번호를 가로채는 방법을 읽습니다.브라우저는 패스워드 필드를 폼으로 볼 때마다 e-메일 및 패스워드 필드를 초기화합니다(패스워드가 캐시에 저장되어 있는 경우).해결책은 다음과 같습니다.패스워드의 입력/커스텀 컴포넌트 필드에 다음 행을 추가합니다.

autoComplete="new-password"

그리고 효과가 있을 거야

단 한 줄만으로 해결했습니다.

"changeHandler()" 및 컴포넌트 상태와 함께 권장되는 방법을 사용할 경우 다음과 같이 입력합니다.

changeHandler = (e) => {    
  if (!e.isTrusted) return;
  ... your code
}

change Handler()-Thing"에 자세한 은 다음과 같습니다.
https://reactjs.org/docs/forms.html#controlled-componentshttpsreactjs.org/docs/forms.html#

도 여러 방법을 엔 '이것'을 '이것'으로 .<form>를 달다<div>태그를 지정하고 해당 양식에 입력된 각 정보를 수동으로 관리합니다.

redux 폼을 사용하여 작업한 작업인 redux 폼에 대한 자동 완료에 문제가 있습니다. 2021/03/08 작업입니다.

if(userId!=undefined)
    {
      instance.get('/user/'+userId)
        .then(function(response){
          dispatch(initialize('user_create_update_form',{
            name:response.data.name,
            email:response.data.email,
            password:response.data.password,
            user_scope:response.data.user_scope.map((item,index)=>{
              return {
                value: item.name,
                label:item.name
              }
            })
          }));
      });
    }
    else
    {
      dispatch(initialize('user_create_update_form',{
        name:"",
        email:"Mail",
        password:"New Password",
        user_scope:[]
      }));
    }

목표는 더미 값을 가진 폼을 디스패치하는 것입니다.

useEffect를 사용할 수 있습니다.

function ScheduleComponent(props){
const [schedulecontent, setSchedulecontent] =seState({email:'',phone:'',date:'',time:''});

   function handlechange(event) {
      const { name, value } = event.target;
       setSchedulecontent((prevContent) => {
        return {
          ...prevContent,
          [name]: value
        };
      })
    }


    useEffect(() => {
//do something here...
    }, [schedulecontent.email,schedulecontent.phone,schedulecontent.date,schedulecontent.time]);}

오래된 질문이지만, 간단한 접근법과 향후 호환 가능한 답변을 찾을 수 없었습니다.

자동 완료 문제를 해결하기 위한 매우 간단한 방법은 브라우저에 고유한 방식으로 만들지 않고 입력 필드를 사용하는 것입니다(물론 가능한 경우).를 들어, 「」를 하지 않는 는, 「」를 추가해 주세요.id name개봉 후 동작하고 있습니다.

필드명을 취득하는 방법은 onChange 함수 내에 fieldName 값을 추가하는 것입니다.

<input
  type="search"
  className="form-control"
  placeholder="Quick Search"
  onChange={(event) =>
    columnSearch({
      columnName: column.name,
      searchValue: event.target.value,
    })
  }
/>

이 ,, 음, 음, 음, 음, 음, 음, 음, a, a, also, a, a, also, also, a, a, also, also, also, a, a, a, a, a, a, a, aformHTML 그태

비밀번호 필드가 아닌 경우 다음을 수행하십시오.

자동완성="new-off"

입력 필드에서 자동 완료를 선택한 후 브라우저에서 자동 채우기 세부 정보를 제거합니다. 그러면 올바르게 작동합니다.

다른 해킹을 시도하는 데 지쳤다면...

추가만 하면 됩니다.

자동완성="new-password"

비밀번호 입력 필드

체크해 주세요.-

            <form action="" className='w-1/2 border border-indigo-500 mb-10'>
                <label htmlFor="username">User Name</label>
                <input type="text" name="username" id="username"/>
                <label htmlFor="password">Password</label>
                <input type="password" name="password" id="password" 
                autocomplete="new-password"/>
                <label htmlFor="phone">Phone</label>
                <input type="text" name="phone" id="phone"/>
                <label htmlFor="email">Email</label>
                <input type="text" name="email" id="email"/>
            </form>

이 방법이 효과가 있었어요, 시도해 보세요:

autoComplete="off" role="presentation"

언급URL : https://stackoverflow.com/questions/37503656/react-doesnt-render-autocomplete-off