2012-03-31 31 views
6

Dưới đây là hình thức tôi tải qua ajax. Khi tôi chạy trang mẫu trực tiếp sau đó tự động lấy nét trên c_name hoạt động trong firefox nhưng khi nạp với ajax nó không! Nó hoạt động tốt với opera/safari/chrome mặc dù!Thuộc tính lấy nét tự động của HTML5 không chỉ hoạt động trong FireFox khi <Form><input> được tải qua Ajax. TẠI SAO?

<form action="client_entry_action.php" method="post" id="client_entry_form" name="client_entry_form"> 

<fieldset id="client_info_1"> 

    <label for="c_name">Name:</label> 
    <input type="text" name="c_name" required placeholder="Name" autofocus="autofocus" /> 

    <label for="c_phone">Phone Number:</label> 
    <input type="tel" name="c_phone" required placeholder="Mobile/Phone Number" /> 

    <label for="c_email">Email:</label> 
    <input type="email" name="c_email" required placeholder="[email protected]" /> 

    <label for="c_address">Address:</label> 
    <textarea name="c_address" ></textarea> 


</fieldset> 

<fieldset id="client_info_2"> 

    <label for="c_info">Additional notes:</label> 
    <textarea name="c_info" ></textarea> 

    <input type="submit" name="add_client" value="Add Client" /> 

</fieldset>   

</form> 

Trả lời

6

Tự động lấy nét chỉ được thực hiện trước khi quá tải; nó có nghĩa là một cách khai báo chỉ định tập trung vào tải trang ban đầu.

+0

Nó hoạt động tốt với opera/safari/chrome mặc dù! Bạn có thể vui lòng giải thích thêm một chút không? – Vishu7

+5

Thông số kỹ thuật không xác định hành vi chính xác cho thuộc tính, vì vậy tất cả các triển khai liên quan đều thực sự tuân thủ đặc tả. Mô tả _does_ mô tả ý tưởng chung là gì, nhưng các trình duyệt khác nhau giải thích hành vi nào sẽ dẫn đến một cách khác nhau. –

0

Tôi có cùng một vấn đề: thuộc tính Tự động lấy nét không hoạt động trong FF, ít nhất là trong phiên bản mới nhất. Tôi cũng có cửa sổ bật lên có biểu mẫu. Ajax được sử dụng cho việc khởi động pop-up này.

Tôi hy vọng những liên kết này sẽ rất hữu ích cho bạn:

Discussion on webmasters.stackexchange.com

Another discussion on stackoverflow

Nhưng tôi đã không phát hiện ra bất kỳ đơn giản hơn và tốt giải pháp tìm kiếm ngoại trừ bằng cách sử dụng hacks javascript.

1

Tôi biết điều này là cũ, nhưng tôi chỉ gặp vấn đề này và có thể giúp ai đó.

Nếu bạn sử dụng jQuery làm việc này:

$("input[name='c_name']").focus(); 

Javascript sẽ là một cái gì đó như thế này (ví dụ tổng quát):

document.getElementById('element').focus(); 

Nhưng bạn phải gọi hàm rằng sau khi hình thức của bạn được tải qua ajax !

5

sử dụng setTimeout sau khi cuộc gọi ajax trên div, hoặc bằng quyền sử dụng jquery .ajaxComplete, hoặc .done

function theAjax(){ 
//after the ajax actions loaded...... 
//use settimeout to refocused on the input.. 
var t=setTimeout("focusMe()",500); 

}

function focusMe(){ 
document.getELementById("theInput").focus(); //the new input 

}

//using jquery use .ajaxComplete, or .done 
$(document).ajaxComplete(function() { 
    $("#focusOnMe").focus(); 
}