【发布时间】：2018-10-14 10:53:40
【问题描述】：
我有一个问题，我认为某些 javascript 使我的搜索字段占位符文本无法显示。我希望这样当我的页面被加载时，用户可以在顶部看到一个搜索图标，旁边写有搜索文本（占位符文本），一旦用户单击输入区域并输入他们的文本，该文本就会消失.我的问题是，当我的页面加载时，只出现搜索图标而没有文本 - 只有在我单击输入字段一次然后再次单击它之后，搜索占位符才在那里。 这是我的html：
<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));
【问题讨论】：
-
您确定它不起作用吗？我在jsfiddle.net/4eok7t34 上试了一下，效果很好
-
我正在使用我可能应该添加的需求软件。我希望在页面加载时出现“搜索”，但是当我单击该区域时，我希望占位符“搜索”消失。
标签： javascript jquery input placeholder