Restore autofocusing of the search field

Use the HTML5 autofocus attribute, and focus on load for browsers
which don't support it.

Also change the removal of the "Where am I?" prompt to happen on
input rather than when the field is focused, so that it is properly
removed and restored when the field has been autofocused.

Fixes https://trac.openstreetmap.org/ticket/5065

diff --git a/app/assets/javascripts/index.js b/app/assets/javascripts/index.js
index a7522479e0f756227426981f3824c09c744a4a00..d07c9797d0da09197a8ee4a2758a977658da0857 100644 (file)
--- a/app/assets/javascripts/index.js
+++ b/app/assets/javascripts/index.js
@@ -227,6 +227,9 @@ $(document).ready(function () {
     };
 
     page.load = function() {
     };
 
     page.load = function() {

+      if (!("autofocus" in document.createElement("input"))) {
+        $(".search_form input[name=query]").focus();
+      }

       return map.getState();
     };
 
       return map.getState();
     };
 

diff --git a/app/assets/javascripts/index/search.js b/app/assets/javascripts/index/search.js
index 3892d01a09939cc5c61f475ba88d45f3adbf6771..81b96635b5bf62af654911bf7d5fc8f5e35bc429 100644 (file)
--- a/app/assets/javascripts/index/search.js
+++ b/app/assets/javascripts/index/search.js
@@ -1,11 +1,12 @@
 OSM.Search = function(map) {
   $(".search_form input[name=query]")
 OSM.Search = function(map) {
   $(".search_form input[name=query]")

-    .on("focus", function() {
-      $(".describe_location").fadeOut(100);
+    .on("input", function(e) {
+      if ($(e.target).val() == "") {
+        $(".describe_location").fadeIn(100);
+      } else {
+        $(".describe_location").fadeOut(100);
+      }

     })
     })

-    .on("blur", function() {
-      $(".describe_location").fadeIn(100);
-    });

 
   $("#sidebar_content")
     .on("click", ".search_more a", clickSearchMore)
 
   $("#sidebar_content")
     .on("click", ".search_more a", clickSearchMore)


@@ -80,6 +81,7 @@ OSM.Search = function(map) {
     map.removeLayer(marker);
     map.removeObject();
     $(".search_form input[name=query]").val("");
     map.removeLayer(marker);
     map.removeObject();
     $(".search_form input[name=query]").val("");

+    $(".describe_location").fadeIn(100);

   };
 
   return page;
   };
 
   return page;

diff --git a/app/views/layouts/_search.html.erb b/app/views/layouts/_search.html.erb
index 1d054d5cd6b801dce858f589a230667c15a4089e..55ce54219eab18da9719f06686bf59aec44c9af4 100644 (file)
--- a/app/views/layouts/_search.html.erb
+++ b/app/views/layouts/_search.html.erb
@@ -1,7 +1,7 @@
 <%= form_tag search_path, :class => "search_form" do %>
   <%= submit_tag t('site.search.submit_text') %>
   <div class='query_wrapper'>
 <%= form_tag search_path, :class => "search_form" do %>
   <%= submit_tag t('site.search.submit_text') %>
   <div class='query_wrapper'>

-    <input type="text" name="query" value="<%= params[:query] %>" placeholder="<%= t('site.search.search') %>">
+    <input type="text" name="query" value="<%= params[:query] %>" placeholder="<%= t('site.search.search') %>" autofocus>

     <%= link_to t('site.search.where_am_i'), '#', { :class => "describe_location", :title => t('site.search.where_am_i_title') } %>
   </div>
 <% end %>
     <%= link_to t('site.search.where_am_i'), '#', { :class => "describe_location", :title => t('site.search.where_am_i_title') } %>
   </div>
 <% end %>