8274625: Search field placeholder behavior

Reviewed-by: prappo
This commit is contained in:
Hannes Wallnöfer 2021-10-06 09:28:37 +00:00
parent df125f680b
commit cdf89304ea
9 changed files with 23 additions and 37 deletions

View File

@ -76,6 +76,7 @@ public class Navigation {
private Content userHeader;
private final String rowListTitle;
private final Content searchLabel;
private final String searchPlaceholder;
private SubNavLinks subNavLinks;
public enum PageMode {
@ -131,6 +132,7 @@ public class Navigation {
this.links = new Links(path);
this.rowListTitle = configuration.getDocResources().getText("doclet.Navigation");
this.searchLabel = contents.getContent("doclet.search");
this.searchPlaceholder = configuration.getDocResources().getText("doclet.search_placeholder");
}
public Navigation setNavLinkModule(Content navLinkModule) {
@ -595,10 +597,11 @@ public class Navigation {
}
private void addSearch(Content tree) {
String search = "search";
String reset = "reset";
HtmlTree inputText = HtmlTree.INPUT("text", HtmlIds.SEARCH_INPUT, search);
HtmlTree inputReset = HtmlTree.INPUT(reset, HtmlIds.RESET_BUTTON, reset);
HtmlTree inputText = HtmlTree.INPUT("text", HtmlIds.SEARCH_INPUT)
.put(HtmlAttr.PLACEHOLDER, searchPlaceholder);
HtmlTree inputReset = HtmlTree.INPUT(reset, HtmlIds.RESET_BUTTON)
.put(HtmlAttr.VALUE, reset);
HtmlTree searchDiv = HtmlTree.DIV(HtmlStyle.navListSearch,
HtmlTree.LABEL(HtmlIds.SEARCH_INPUT.name(), searchLabel));
searchDiv.add(inputText);

View File

@ -1,5 +1,5 @@
/*
* Copyright (c) 2010, 2019, Oracle and/or its affiliates. All rights reserved.
* Copyright (c) 2010, 2021, Oracle and/or its affiliates. All rights reserved.
* DO NOT ALTER OR REMOVE COPYRIGHT NOTICES OR THIS FILE HEADER.
*
* This code is free software; you can redistribute it and/or modify it
@ -57,6 +57,7 @@ public enum HtmlAttr {
ONCLICK,
ONKEYDOWN,
ONLOAD,
PLACEHOLDER,
REL,
ROLE,
ROWS,

View File

@ -520,20 +520,18 @@ public class HtmlTree extends Content {
}
/**
* Creates an HTML {@code INPUT} element with the given id and initial value.
* Creates an HTML {@code INPUT} element with the given id.
* The element as marked as initially disabled.
*
* @param type the type of input
* @param id the id
* @param value the initial value
* @return the element
*/
public static HtmlTree INPUT(String type, HtmlId id, String value) {
public static HtmlTree INPUT(String type, HtmlId id) {
return new HtmlTree(TagName.INPUT)
.put(HtmlAttr.TYPE, type)
.setId(id)
.put(HtmlAttr.VALUE, value)
.put(HtmlAttr.DISABLED, "disabled");
.put(HtmlAttr.DISABLED, "");
}
/**

View File

@ -1,5 +1,5 @@
/*
* Copyright (c) 2015, 2020, Oracle and/or its affiliates. All rights reserved.
* Copyright (c) 2015, 2021, Oracle and/or its affiliates. All rights reserved.
* DO NOT ALTER OR REMOVE COPYRIGHT NOTICES OR THIS FILE HEADER.
*
* This code is free software; you can redistribute it and/or modify it
@ -96,28 +96,16 @@ function createMatcher(pattern, flags) {
var isCamelCase = /[A-Z]/.test(pattern);
return new RegExp(pattern, flags + (isCamelCase ? "" : "i"));
}
var watermark = 'Search';
$(function() {
var search = $("#search-input");
var reset = $("#reset-button");
search.val('');
search.prop("disabled", false);
reset.prop("disabled", false);
search.val(watermark).addClass('watermark');
search.blur(function() {
if ($(this).val().length === 0) {
$(this).val(watermark).addClass('watermark');
}
});
search.on('click keydown paste', function() {
if ($(this).val() === watermark) {
$(this).val('').removeClass('watermark');
}
});
reset.click(function() {
search.val('').focus();
});
search.focus()[0].setSelectionRange(0, 0);
search.focus();
});
$.widget("custom.catcomplete", $.ui.autocomplete, {
_create: function() {

View File

@ -223,6 +223,7 @@ doclet.Type=Type
doclet.Modifier_and_Type=Modifier and Type
doclet.Implementation=Implementation(s):
doclet.search=SEARCH:
doclet.search_placeholder=Search
doclet.Field=Field
doclet.Property=Property
doclet.Constructor=Constructor

View File

@ -617,8 +617,9 @@ ul.ui-autocomplete li {
top:10px;
font-size:0;
}
.watermark {
color:#545454;
::placeholder {
color:#909090;
opacity: 1;
}
.search-tag-desc-result {
font-style:italic;

View File

@ -137,8 +137,7 @@ public class CheckStylesheetClasses {
// used in search.js; may be worth documenting in HtmlStyle
removeAll(styleSheetNames, "result-highlight", "result-item",
"search-tag-desc-result", "search-tag-holder-result",
"ui-autocomplete", "ui-autocomplete-category",
"watermark", "expanded");
"ui-autocomplete", "ui-autocomplete-category", "expanded");
// snippet-related
removeAll(styleSheetNames, "bold", "highlighted", "italic");

View File

@ -421,8 +421,8 @@ public class TestSearch extends JavadocTester {
"<div class=\"nav-list-search\">",
"""
<label for="search-input">SEARCH:</label>
<input type="text" id="search-input" value="search" disabled="disabled">
<input type="reset" id="reset-button" value="reset" disabled="disabled">
<input type="text" id="search-input" disabled placeholder="Search">
<input type="reset" id="reset-button" disabled value="reset">
""");
checkOutput(fileName, true,
"<div class=\"flex-box\">");
@ -710,12 +710,6 @@ public class TestSearch extends JavadocTester {
checkOutput("search.js", true,
"function searchIndexWithMatcher(indexArray, matcher, category, nameFunc) {",
"""
search.on('click keydown paste', function() {
if ($(this).val() === watermark) {
$(this).val('').removeClass('watermark');
}
});""",
"""
function getURLPrefix(ui) {
var urlPrefix="";

View File

@ -191,8 +191,9 @@ public class TestStylesheet extends JavadocTester {
font-size:0;
}""",
"""
.watermark {
color:#545454;
::placeholder {
color:#909090;
opacity: 1;
}""");
checkOutput("pkg/A.html", true,