Refactor search placeholder

HTML supports the placeholder attribute, so we should use it
instead of implementing it ourselves.

The placeholder attribute is not available prior IE10 (not including
IE10). However:

1. In non-supporting browsers (e.g., IE9), the search functionality
should still work correctly.
2. Non-supporting browsers don't qualify for the "full support" level
detailed in #240
IE9 for instance is released in 2011, and Microsoft announced its end of
support in 2016.

Author: sorawee

scribble-lib/scribble/html-render.rkt

@@ -221,26 +221,16 @@
          (string->symbol (alt-tag-name s)))))
 
 (define (make-search-box top-path) ; appears on every page
-  (let ([sa         string-append]
-        [emptylabel "...search manuals..."]
-        [dimcolor   "#888"])
+  (let ([emptylabel "...search manuals..."])
     `(form ([class "searchform"])
        (input
         ([class "searchbox"]
-         [style ,(sa "color: "dimcolor";")]
          [type "text"]
          [tabindex "1"]
-         [value ,emptylabel]
+         [placeholder ,emptylabel]
          [title "Enter a search string to search the manuals"]
          [onkeypress ,(format "return DoSearchKey(event, this, ~s, ~s);"
-                              (version) top-path)]
-         [onfocus ,(sa "this.style.color=\"black\"; "
-                       "this.style.textAlign=\"left\"; "
-                       "if (this.value == \""emptylabel"\") this.value=\"\";")]
-         [onblur ,(sa "if (this.value.match(/^ *$/)) {"
-                      " this.style.color=\""dimcolor"\";"
-                      " this.style.textAlign=\"center\";"
-                      " this.value=\""emptylabel"\"; }")])))))
+                              (version) top-path)])))))
 (define search-box (make-search-box "../"))
 (define top-search-box (make-search-box ""))
 

scribble-lib/scribble/scribble.css

@@ -152,10 +152,13 @@ table td {
   padding: 0px;
   background-color: #eee;
   border: 1px solid #ddd;
-  text-align: center;
   vertical-align: middle;
 }
 
+.searchbox::placeholder {
+  text-align: center;
+}
+
 #contextindicator {
   position: fixed;
   background-color: #c6f;