AJAX 호출 사용 시 브라우저 자동 완성/자동 채우기에 저장하는 방법
폼이 제출될 때까지 브라우저는 폼 값을 저장하지 않습니다. 즉, 표준 폼 제출 대신 AJAX를 사용하는 경우 브라우저의 자동 채우기가 채워지지 않습니다.AJAX를 통해 제출하는 양식으로 편리하게 사용할 수 있도록 브라우저를 강제로 자동 채우기/자동 완성할 수 있는 방법이 있습니까?브라우저가 기억하지 못해서 매번 양식 필드에 동일한 내용을 입력해야 하는 것은 제 AJAX 페이지로 이동하는 것이 귀찮습니다.
제 질문은 이 질문과 거의 일치합니다. 다만 파이어폭스의 작업만 해당 질문에 대한 답변으로 제공된다는 점을 제외하고는 말입니다.모든 주요 브라우저(적어도 크롬, FF, IE)에서 작동하는 솔루션을 찾고 있습니다.
참고: 저는 이 질문을 구글링할 때 거의 항상 나타나는 AJAX 자동 완성 플러그인을 말하는 것이 아닙니다.과거에 입력한 내용을 기억하여 양식을 작성하는 데 도움이 되는 브라우저의 내장 자동 완성 또는 자동 채우기에 대해 이야기하는 것입니다.
아직도 이 문제를 해결하려는 사람이라면, 제가 답을 찾은 것 같습니다.
Chrome은 Default를 방지하고 실제 제출을 직접 처리하더라도 제출 이벤트를 인식하려고 합니다.
그게 다예요, 당신이 해야할 필요가 있어요.preventDefault클릭 이벤트가 아닌 제출 이벤트.
이것은 작성 당시 Chrome, Edge 및 IE 11에서 작동했습니다(Firefox에서 다운로드하고 테스트하는 것이 너무 귀찮습니다).양식은 다음과 같습니다.
<form method="POST" id="my-form">
<label>Email</label>
<input autocomplete="email" type="email" name="email">
<button type="submit">Subscribe</button>
</form>
주목하세요.autocomplete기여하다.사용할 수 있는 모든 값입니다.autocomplete.
자바스크립트에서 간단히 다음과 같은 작업을 수행합니다.
$("#my-form").on("submit", function (ev) {
ev.preventDefault();
// Do AJAX stuff here
});
브라우저는 사용자가 가입 버튼을 클릭할 때 입력한 모든 전자 메일을 기억합니다.
저도 이 사실을 알게 되었습니다. 물론 브라우저 간에 해결할 수 있는 좋은 해결책은 없는 것 같습니다. 하지만 여기 IE에 대한 솔루션은 다음과 같습니다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<SCRIPT>
function subForm()
{
window.external.AutoCompleteSaveForm(f1);
f1.submit();
}
</script>
</HEAD>
<BODY>
<FORM id=f1>
User ID : <input type=text name=id></input><br>
Password :<input type=password name=pw></input><br>
E-mail :<input type = text VCARD_NAME = "vCard.Email"> <br>
<input type=button value=submit onclick="subForm()">
</FORM>
</BODY>
</HTML>
보낸이: http://support.microsoft.com/kb/329156
이 방법 사용:
AutoCompleteSaveForm = function(form){
var iframe = document.createElement('iframe');
iframe.name = 'uniqu_asdfaf';
iframe.style.cssText = 'position:absolute; height:1px; top:-100px; left:-100px';
document.body.appendChild(iframe);
var oldTarget = form.target;
var oldAction = form.action;
form.target = 'uniqu_asdfaf';
form.action = '/favicon.ico';
form.submit();
setTimeout(function(){
form.target = oldTarget;
form.action = oldAction;
document.body.removeChild(iframe);
});
}
ie10, ff 최신, chrome 최신으로 테스트됨
직접 테스트해 보십시오: http://jsbin.com/abuhICu/1
말씀하신 제 질문에 대한 답변을 시도해보셨나요?정답은 hidden iframe을 사용하는 것이지만 그는 그 아이디어가 IE와 Chrome에서 작동하지 않는다고 주장하는 것 같습니다.
아이디어를 생각해보고 숨겨진 iframe을 사용하는 대신 사용자 이름/비밀번호/제출 보이는 입력 요소를 POST 형식으로 iframe에 입력하면 됩니다.사용자가 iframe에 로그인 세부 정보를 직접 입력합니다.적절한 자바스크립트를 사용하면 로딩 이미지를 넣을 수 있고 서버에서 성공 또는 거부를 할 수 있으며 부모 또는 전체 페이지를 업데이트 할 수 있습니다.저는 그것이 어떤 브라우저에서도 작동할 것이라고 믿습니다.
아니면 서버 쪽에서 API를 구현했을 가능성이 있기 때문에 여전히 AJAX를 사용하고 싶다면요.그냥 더미 POST를 보내도록 iframe을 만들 수 있고 동시에 실제 사용자/패스를 AJAX URL로 보낼 수 있습니다.
혹은 숨긴 아이프레임을 사용하기 위해, 숨기지 않고 보이지 않는 곳으로 옮기기 위해 뒤로 돌아옵니다.top: -1000px.
몇 시간 동안 검색한 결과 양식을 제출하지 않고 트리거 자동 완성에서 해결책을 찾았습니다.
기본적으로 같은 페이지에 숨겨진 iframe을 사용하고 폼의 동작을 iframe의 'src'로 설정한 후 폼 안에 숨겨진 제출 버튼을 추가하면 사용자가 AJAX 요청을 트리거하는 당신의 버튼을 클릭하면 AJAX 요청을 전송하기 전에 프로그램적으로 숨겨진 버튼을 클릭해야 합니다.아래의 예를 참조:
양식 페이지에서:
<iframe id="hidden_iframe" name="hidden_iframe" class="hidden" src="/content/blank"></iframe>
<form target="hidden_iframe" method="post" action="/content/blank" class="form-horizontal">
<input type="text" name="name">
<input type="text" name="age">
....
<button id="submit_button" type="submit" class="hidden"></button>
<button id="go_button" type="submit" class="hidden">Go</button>
</form>
그러면 자바 스크립트:
$('#go_button').click(function(event){
//submit the form to the hidden iframe
$('#submit_button').click();
//do your business here
$.ajax(function(){
//whatever you want here
}})
);
도움이 되길 바랍니다.
언급URL : https://stackoverflow.com/questions/9201858/how-to-store-to-browser-auto-complete-auto-fill-when-using-ajax-calls
'programing' 카테고리의 다른 글
| 오라클에서 날짜 시간 쿼리 (0) | 2023.10.19 |
|---|---|
| django와 wsgi로 하위 디렉토리에서 워드프레스 블로그 제공 (0) | 2023.10.19 |
| mysql에 대한 excel 형식 날짜 (0) | 2023.10.19 |
| 드롭다운 상자에서 선택한 항목을 설정하는 방법 (0) | 2023.10.19 |
| 인덱싱 Pandas 데이터 프레임: 정수 행, 명명된 열 (0) | 2023.10.19 |