クリックしても、アクティブなタブ/プレースホルダーがそれに応じて変化しません

debugcn 投稿 Dev

アビゲイル

タブをクリックすると、入力フィールドのプレースホルダーが変更され、アクティブなタブに従って検索が実行されます。なぜそれが機能しないのか誰かが見てください？

私はこのフィドルに私の完全なコードをここに投稿しました：https：//jsfiddle.net/4bcog3f8/

          <script type="text/javascript">
                            function searchEncore() {
                                var encoreBaseURLInput, encoreBaseURL, searchInput, scopeInput, searchString, scopeString, locationHref, charRegExString, base64Regex;
                                /*base64_encoding_map includes special characters that need to be
                                 encoded using base64 - these chars are "=","/", "\", "?"
                                 character : base64 encoded */
                                var base64_encoding_map = {
                                    "=": "PQ==",
                                    "/": "Lw==",
                                    "\\": "XA==",
                                    "?": "Pw=="
                                };

                                var escapeRegExp = function(string) {
                                    return string.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$1");
                                }
                                encoreBaseURLInput = document.getElementById("encoreBase");
                                searchInput = document.getElementById("encoreSearchInput");

                                if (searchInput && encoreBaseURLInput) {
                                    encoreBaseURL = encoreBaseURLInput.value;
                                    searchString = searchInput.value;
                                    for (var specialChar in base64_encoding_map) {
                                        charRegExString = escapeRegExp(specialChar);
                                        base64Regex = new RegExp(charRegExString, "g");
                                        searchString = searchString.replace(base64Regex, base64_encoding_map[specialChar])
                                    }
                                    searchString = encodeURIComponent(searchString);

                                    scopeInput = document.getElementById('encoreSearchLocation');

                                    if (scopeInput) {
                                        scopeString = scopeInput.value;
                                    }

                                    if (scopeString) {
                                        scopeString = encodeURIComponent(scopeString);
                                        locationHref = encoreBaseURL + "C__S" + searchString + scopeString + "__Orightresult__U";
                                    } else {
                                        locationHref = encoreBaseURL + "C__S" + searchString + "__Orightresult__U";
                                    }

                                    languageSetting = document.getElementById("encoreLanguage");

                                    if (languageSetting) {
                                        locationHref = locationHref + "?lang=" + languageSetting.value;
                                    }

                                    window.location.href = locationHref;
                                }
                                return false;
                            }
                        </script>

khadkamhn

これがお役に立てば幸いです

JavaScript

//Remove Value from Input
var input = document.querySelector('[name="encoreSearchInput"]');
input.setAttribute('onblur','');
input.setAttribute('onfocus','');
input.setAttribute('value','');
//Set Initial Placeholder
input.setAttribute('placeholder','SEARCH CATALOG');
input.addEventListener('focus',function(){
    this.setAttribute('placeholder','');
});
input.addEventListener('blur',function(){
    this.setAttribute('placeholder','SEARCH '+document.querySelector('.uk-active a').textContent.toUpperCase());
});

//Tab Event
var tab_a = document.querySelectorAll('.uk-tab a');
Array.from(tab_a).forEach(a=>{
    a.addEventListener('click',function(e){
        e.preventDefault();
        var li = document.querySelectorAll('.uk-tab a');
        Array.from(li).forEach(lnk=>{ lnk.parentNode.classList.remove('uk-active'); });
        this.parentNode.classList.add('uk-active');
        document.querySelector('[name="encoreSearchInput"]').setAttribute('placeholder','SEARCH '+this.textContent.toUpperCase());
    });
});

ここでjsfiddleリンクを見つけます：https：//jsfiddle.net/khadkamhn/dajxrLwn/

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]