godoc: use "search" input type for search box.

Uses placeholder attribute instead of changing the value of search
field on browsers that support it.  On other browsers, the fake
placeholder text is restored when the empty box loses focus.

R=golang-dev, gri
CC=golang-dev
https://golang.org/cl/4441041

diff --git a/doc/all.css b/doc/all.css
index b1d55cf25adb4febf4dfabe060e5ebb19d5b9b5e..dd00d1adb05c611aab548bad95c456baab631bc6 100644 (file)
--- a/doc/all.css
+++ b/doc/all.css
@@ -96,7 +96,7 @@ h1#title {
   color: #999;
 }
 #search {
-  width: 100px;
+  width: 120px;
   margin-left: 0.5em;
 }
 #search.inactive {

diff --git a/doc/godocs.js b/doc/godocs.js
index 8b451547d6b745bdac0cc95104e6173b40fdec0c..2b3ab065ff60e92a21e5d8edd4485692aaf7e5fd 100644 (file)
--- a/doc/godocs.js
+++ b/doc/godocs.js
@@ -34,7 +34,18 @@ function godocs_bindSearchEvents() {
       search.className = "";
     }
   }
+  function restoreInactive() {
+    if (search.value != "") {
+      return;
+    }
+    if (search.type != "search") {
+      search.value = search.getAttribute("placeholder");
+    }
+    search.className = "inactive";
+  }
+  restoreInactive();
   bindEvent(search, 'focus', clearInactive);
+  bindEvent(search, 'blur', restoreInactive);
 }
 
 /* Generates a table of contents: looks for h2 and h3 elements and generates

diff --git a/lib/godoc/godoc.html b/lib/godoc/godoc.html
index f1d9c2ad9c6b61cfcb1d4720417f5103e704d452..837f53c483e2e62334753b2c16ad77b212d8f81a 100644 (file)
--- a/lib/godoc/godoc.html
+++ b/lib/godoc/godoc.html
@@ -33,7 +33,7 @@
         <a href="/pkg/">Packages</a> <span class="sep">|</span>
         <a href="/cmd/">Commands</a> <span class="sep">|</span>
         <a href="/doc/go_spec.html">Specification</a>
-        <input id="search" type="text" name="q" value="{.section Query}{Query|html-esc}{.or}code search{.end}" class="{.section Query}{.or}inactive{.end}" />
+        <input id="search" type="search" name="q" value="{.section Query}{Query|html-esc}{.end}" class="{.section Query}{.or}inactive{.end}" placeholder="code search" results="0" />
         </form>
       </div>
     </div>