Tự động hoàn thành trình duyệt tự động điền cho các biểu mẫu được tạo động (được xử lý bằng ajax)

Question

Tôi đang tạo động một biểu mẫu. Vì lợi ích của sự đơn giản, đó là một mẫu đăng nhập với email/mật khẩu. Biểu mẫu được gửi, nhưng nó sẽ kích hoạt yêu cầu AJAX xử lý đăng nhập thực tế và sự kiện gửi bị hủy (e.preventDefault()).

Tôi sử dụng e.preventDefault() để hủy hành động mặc định của biểu mẫu, nghĩa là, chuyển đến trang trong 'hành động' nhưng điều này cũng có vẻ như hủy tự động phát hiện trình duyệt.

Tôi nghĩ rằng bạn cần phải điền đầy đủ thông số yêu cầu đối với autocomplete bản địa để làm việc:

• lĩnh vực đầu vào của bạn type="text" phải có một name
• Hình thức phải nộp < - điều này là không thực sự xảy ra trong trường hợp của tôi

Phân tích của tôi có đúng và có cách nào để thực hiện công việc tự động hoàn thành trong trường hợp này không?

---

Để xua đuổi các fanboy: Tôi không tìm kiếm bất kỳ giải pháp có liên quan đến jQuery hoặc [chèn khuôn khổ của bạn], tôi muốn sử dụng tính năng trình duyệt autocomplete bản địa. Tôi không có danh sách các từ mà tôi muốn tự động hoàn thành.

Answer 1

DMoses giải pháp rất truyền cảm hứng cho giải pháp của tôi, nhưng nó có sự khác biệt đáng kể vì vậy tôi nghĩ rằng nó sẽ là một ý tưởng tốt để làm cho giải pháp của riêng tôi, tiền thưởng đi vào DMoses mặc dù: P

DMoses giải pháp di chuyển (hoặc bản sao) biểu mẫu cho khung nội tuyến và sau đó gửi nó. Lý do bạn muốn làm điều này là vì vậy 'cha mẹ' của bạn không tải lại. Có một giải pháp đơn giản hơn: có biểu mẫu gửi đến iframe. Thao tác này chỉ giống nhau và bạn không phải sao chép bất kỳ nút nào.

Bước này hoàn toàn có thể lặp lại. Nhược điểm duy nhất là bạn không kiểm soát khi chính xác một mục nhập tự động hoàn tất được thêm vào. Bạn có thể muốn chỉ thêm các mục nhập hợp lệ nhưng ít nhất trường hợp này bắt chước hoàn toàn cách biểu mẫu bình thường sẽ hoạt động nếu không có ajax tham gia. Nếu bạn muốn kiểm soát những gì được thêm vào tự động hoàn thành, hãy sử dụng giải pháp DMoses ', sao chép biểu mẫu và gửi nó trong khung nội tuyến.

Đối với tôi, điều này là đủ:

<form onsubmit="return ajaxit();" autocomplete="on" target="the_iframe"> 
    <input id="foo" name="foo"/> 
    <input type="submit" /> 
</form> 
<iframe id="the_iframe" name="the_iframe" src="javascript:false"></iframe> <!-- you'll want this hidden --> 

Phần tốt nhất: không phải trả thêm Javascript là cần thiết để làm công việc này! (ngoài việc tạo một id/tên duy nhất cho biểu mẫu, nhưng đó là siêu tầm thường).

jsFiddle: http://jsfiddle.net/KzF6s/13/

Answer 2

Ok tôi tìm thấy một cách phức tạp để làm điều này:

Đây là javascript:

function ajaxit() { 
    var iFrameWindow = document.getElementById("myframe").contentWindow; 
    iFrameWindow.document.body.appendChild(document.getElementById("myform").cloneNode(true)); 
    var frameForm = iFrameWindow.document.getElementById("myform"); 
    frameForm.onsubmit = null; 
    frameForm.submit(); 
    return false; 
} 

Đây là html:

<form id="myform" onsubmit="return ajaxit();" autocomplete="on"> 
    <input id="foo" name="foo"/> 
    <input type="submit" /> 
</form> 
<iframe id="myframe" src=""></iframe> <!-- you'll want this hidden --> 

Nhấp gửi sẽ chạy ajaxit() phương pháp. phương thức tạo cùng một biểu mẫu trong iframe và gửi nó tới máy chủ. Bạn có thể hoặc là piggyback gửi yêu cầu máy chủ của bạn hoặc bạn có thể thực hiện một yêu cầu ajax riêng biệt và bỏ qua iframe.

Tôi biết rằng nó xấu xí, nhưng nó hoạt động.

EDIT: Đây là số jsbin để phát.

Answer 3

Sau rối tung xung quanh một chút với fiddles về nhận xét vào cách giải quyết câu trả lời khác, tôi quyết định để làm cho danh sách này cho bất cứ ai có thể chờ đợi cho các trình duyệt để xử lý này một cách chính xác.

Vì vậy, như một bản tóm tắt, các phiên bản trình duyệt hỗ trợ autocomplete giá trị trên hình thức tạo với JavaScript:

• FireFox 25
• Chrome 33 (phiên bản hiện tại là 31, vì vậy coming soon)
• Internet Explorer 11 (reference)