양식 입력 데이터를 확인할 때 - 흐림 또는 변경 이벤트를 사용 하시겠습니까?

Question

내가 양식을 다음과 같이 있다고 가정합시다 :

Name:<input type="text" name="xxx" id="name"/> 
Type:<select> 
      <option>xx</option> 
      <option>xx</option> 
     </select> 
<input type="submit" disabled="disabled" id="sub" /> 

지금, 나는 확실히 사용자 이름이 고유하게 확인하고 싶다. 제출 버튼은 이름이 고유 한 경우에만 abled됩니다. 그래서 jQuery AJAX를 사용하여 데이터베이스를 쿼리합니다.

하지만 지금은 언제 체크해야할까요?

$("#name").blur(function() { 
    $.get(........); 
} 

하지만 지금은 현대적인 브라우저가 양식 데이터를 저장하고 auto-filled 기능을 제공합니다

우선 나는 이것이 사용합니다. 따라서 사용자가 입력을 dbclick하면 브라우저는 사용자가 선택할 수있는 데이터 목록 (내역 데이터)을 제공합니다 (아래 이미지 참조).

사용자가 그 중 하나를 선택 blur 이벤트가 트리거 할 수 없습니다. 또한 change 이벤트를 사용하려고 시도하지만 사용자가 키 입력을 사용하여 입력 할 때 서버에 너무 많은 요청이 발생할 것입니다.

이 문제를 해결하는 방법은 무엇입니까?

업데이트 : 아래 답변 중 누구도 해당하지 않습니다. 그리고 이제는 내 페이지에서 타이머를 사용하여 0.5 초마다 "이름"이 변경되었는지 확인합니다. 그건 내 요구 사항을 충족하는 것 같습니다.

Answer 1

"사용 가능 여부 확인"버튼을 추가하고 "사용 가능 여부 확인"버튼의 클릭 이벤트에서 사용자 이름 고유성 검사 기능을 시작하기 만하면됩니다.

Name:<input type="text" name="xxx" id="name"/> <input type="button" name="checkUsername" id="checkUsername" value="Check availability"/> 
Type:<select> 
      <option>xx</option> 
      <option>xx</option> 
     </select> 
<input type="submit" disabled="disabled" id="sub" /> 

$("#checkUsername").click(function (e) { 
    $.get(........); 
    e.preventDefault(); 
    return false; 
} 

Answer 2

사용자가해야 할 일은 사용자가 텍스트 상자를 두 번 클릭하고 옵션을 다운로드하여 코드의 배열에 저장하는 것입니다. 사용자가 텍스트 상자에 입력 할 때 원하지 않는 항목을 제거하십시오. 또한

, 당신은 아마 드롭 다운 목록에도 변화를 사용하려면 (입력 요소에) 흐림과 같은 이벤트를 발생하려면.

Answer 3

간단한 해결책 : 암호 필드의 초점으로 아약스 호출을 시작하십시오.

Answer 4

내가 사용하는 접근 방식은 on page load에 사용자 이름 모음을로드하고 change event에있는 컬렉션에 대해 사용자가 입력 한 데이터를 확인하는 것입니다. 이렇게하면 데이터베이스가 페이지 당 하나의 요청 만 처리하면되고 프런트 엔드는 더 많은 작업을해야하지만 사용자의 경험에 부정적인 영향을주지 않아야합니다.

두 명의 새로운 사용자가 동시에 페이지를로드하고 동일한 사용자 이름을 선택하여 제출하려고하면 동시 제출 문제가 발생할 수 있습니다. 마지막 제출자는 제출 버튼이 유효하지만 사용자 이름이 유효하지 않습니다. 서버 측에서 처리해야합니다.