显示搜索字段占位符文本

Question

我有一个问题，我认为某些 javascript 阻止显示我的搜索字段占位符文本。我希望它，以便在加载我的页面时，用户可以在顶部看到一个搜索图标，旁边写着文本 SEARCH(占位符文本(，一旦用户单击输入区域并输入他们的文本，此文本就会消失。我的问题是，当我的页面加载时，只显示搜索图标而没有文本 - 只有在我单击输入字段一次然后再次单击它之后，SEARCH 占位符才在那里。 这是我的网页：

<form id="search" role="search" onsubmit="return checkForm()" action="${searchPage}" method="get" name="simpleSearch">
<fieldset>
<legend aria-hidden="true" class="visually-hidden">${Resource.msg('simplesearch.searchCatalog', 'search', null)}</legend>
<button class="mobile-search-btn" for="q" aria-hidden="false" aria-expanded="false" aria-controls="q" tabindex="0" aria-label="show search field button tap twice to open search input field">${Resource.msg('simplesearch.searchlabel', 'search', null)}</button>
<input tabindex="0" type="text" id="q" name="q" value="" class="searchField"  placeholder="${Resource.msg('simplesearch.searchtext', 'search', null)}" style="font-style:normal;" unbxdattr="sq"/>
<input tabindex="0" type="submit" name="go" value="${Resource.msg('simplesearch.searchtext', 'search', null)}" unbxdattr="sq_bt"/>
</fieldset>
</form>

这是javascript，我相信它导致了这个问题。

//Header Search Handler
function headerSearchHandler(){
var $searchInput = $(".header-search input[type=text]"),
$searchSubmit = $(".header-search input[type=submit]"),
$mobSearchBtn = $(".mobile-search-btn"),
$myAccountText = $(".menu-utility-user .account-text"),
$miniCart = $("#header #mini-cart"),
$searchForm = $(".header-search form"),
$headerPromo = $(".header-promo-area");

$mobSearchBtn.on("click touchend", function(e) {

$(this).hide();
$searchInput.show();
$searchSubmit.show();
$miniCart.addClass("search-open");
$searchForm.addClass("search-open");
setTimeout(function() {
$searchInput.addClass("active").focus();
}, 500);
e.stopPropagation();
});
$searchInput.on("click touchend", function(e) {
e.stopPropagation();
}).blur(function(e) {
var $this = $(this);
if(($this.val() != '') && !$this.hasClass("placeholder")){return;}
if($this.hasClass("active")){
$this.removeClass("active");
$this.hide();
$searchSubmit.hide();
//$myAccountText.show();
$mobSearchBtn.show();
$miniCart.removeClass("search-open");
$searchForm.removeClass("search-open");
}
});
}//End Header Search Handler

我一直在讨论这个问题，我不知道发生了什么。我是新手，但任何人都可以看到为什么我的占位符文本在加载页面时没有自动显示吗？

更新！在经历了更多之后，似乎这是影响占位符的代码，我仍然无法完全弄清楚：

(function (app, $) {
function initializeEvents() {
$('[placeholder]').each(function (){
var jqThis = $(this),
placeholder = jqThis.attr("placeholder");
jqThis.focus(function () {
if (jqThis.val() == placeholder) {
jqThis.removeClass('placeholder').val('');
jqThis.attr('placeholder', '');
}
}).blur(function () {
if (jqThis.val() == '' || jqThis.val() == jqThis.attr('placeholder')) {
jqThis.addClass('placeholder').val(placeholder);
jqThis.attr('placeholder', placeholder);
}
});
});
}
app.searchplaceholder = {
init : function () {
// This function seems to disable submit buttons in checkout via ie10
// Is it necessary to cache the placeholder if it's node attribute is supported?
if($.browser.msie && $.browser.version === '10.0') return;
initializeEvents();
}
};
}(window.app = window.app || {}, jQuery));

Answer 1

我个人会使用 CSS 实现这种行为

input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; } /* FF 4-18 */
input:focus::-moz-placeholder { color:transparent; } /* FF 19+ */
input:focus:-ms-input-placeholder { color:transparent; } /* IE 10+ */
input:focus::placeholder { color: transparent; } /* Modern Browsers */

但是你也可以使用一些内联的javascript...

<input 
type="text" 
placeholder="enter your text" 
onfocus="this.placeholder = ''"
onblur="this.placeholder = 'enter your text'" />

或者，您可以处理代码中的焦点/模糊事件，以显示/隐藏占位符(就像您当前所做的那样(。