Question

我有一个问题，我认为有些javascript会阻止我的搜索字段占位符文字显示。我希望这样，当我的页面加载时，用户可以在顶部看到一个搜索图标，旁边写有文本SEARCH（占位符文本），一旦用户点击输入区域输入文本，该文本就会消失。我的问题是，当我的页面加载时，只显示搜索图标而没有文本 - 只有在我单击输入字段一次然后再次单击它之后才会显示SEARCH占位符。这是我的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

我已经过了这个，我无法弄清楚发生了什么。我是新手，但有人可以看到为什么我的占位符文字在页面加载时不会自动显示吗？

UPDATE！经过这一步之后，似乎这是影响占位符的代码，我仍然无法弄明白：

(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'" />

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

显示搜索字段占位符文本

1 个答案: