Add autofocus support with JavaScript fallback (jQuery) for non-HTML5…

… browsers (fixes #421)

lib/formtastic/inputs/base/html.rb

@@ -21,7 +21,8 @@ def to_html
         def input_html_options
           { 
             :id => dom_id,
-            :required => required?
+            :required => required?,
+            :autofocus => autofocus?
           }.merge(options[:input_html] || {})
         end
 
@@ -44,7 +45,7 @@ def dom_index
             ""
           end
         end
-        
+
       end
     end
   end

lib/formtastic/inputs/base/validations.rb

@@ -140,7 +140,11 @@ def not_required_through_negated_validation!
         def optional?
           !required?
         end
-
+
+        def autofocus?
+          !!options[:autofocus]
+        end
+
         def column_limit
           column.limit if column? && column.respond_to?(:limit)
         end

lib/formtastic/inputs/base/wrapping.rb

@@ -21,6 +21,7 @@ def wrapper_html_options
           opts[:class] << "error" if errors?
           opts[:class] << "optional" if optional?
           opts[:class] << "required" if required?
+          opts[:class] << "autofocus" if autofocus?
           opts[:class] = opts[:class].join(' ')
 
           opts[:id] ||= wrapper_dom_id

lib/formtastic/inputs/hidden_input.rb

@@ -36,7 +36,7 @@ class HiddenInput
       #
       # @todo this is inconsistent with all other inputs, deprecate and remove
       def input_html_options
-        options.slice(:value).merge(super).merge(:required => nil)
+        options.slice(:value).merge(super).merge(:required => nil).merge(:autofocus => nil)
       end
 
       def to_html

lib/generators/templates/formtastic.js

@@ -0,0 +1,28 @@
+(function($) {
+    $.formtastic = function(options) {
+        this.settings = $.extend({}, $.formtastic.defaults, options);
+    };
+
+    $.extend($.formtastic, {
+        defaults: {},
+
+        prototype: {
+            autofocusSupported: function() {
+                var input = document.createElement("input");
+                return "autofocus" in input;
+            },
+
+            autofocus: function() {
+                if (this.autofocusSupported() == false) {
+                    $(':input.autofocus:not(:hidden)').last().focus();
+                }
+            }
+        }
+    });
+})(jQuery);
+
+var formtastic = new $.formtastic();
+
+$(document).ready(function() {
+    formtastic.autofocus();
+});

sample/basic_inputs.html

@@ -5,6 +5,8 @@
     <meta charset="utf-8">
     <title>Formtastic</title>
     <link href="../lib/generators/templates/formtastic.css" rel="stylesheet" type="text/css" />
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js" type="text/javascript"></script>
+    <script src="../lib/generators/templates/formtastic.js" type="text/javascript"></script>
     <style>
       body {
         font-family: helvetica, arial;
@@ -98,6 +100,11 @@ <h1>Formtastic</h1>
           </fieldset>
         </li>
 
+        <li class="string optional" id="gem_autofocus_input">
+          <label for="gem_autofocus">Autofocus</label>
+          <input id="gem_autofocus" name="gem[autofocus]" type="text" value="The focus is set to this field" autofocus="autofocus" class="autofocus">
+        </li>
+
         <li class="radio optional">
           <fieldset>
             <legend class="label"><label>Rate</label></legend>