jQuery를 사용하여 wordpress의 플러그인 검색 필드에 자리 표시 자 속성을 추가하려고합니다.

equid store가있는 사이트를 구축하려고하는데 equid 검색 위젯이 자리 표시 자로 "검색"을 갖기를 원합니다. 워드 프레스를 처음 접하는 사람은 아니지만, 내 custom.js가 내 자식 테마의 function.php에 제대로 포함되어 있고 다른 스크립트 n snips가 잘 작동합니다.

정말 간단해야 할 것 같아요. . . 이것은 내가 영향을 미치고 싶은 html입니다.

<input type="search" class="ecwid-SearchPanel-field" maxlength="100" kl_vkbd_parsed="true">

내가 사용하는 jQuery는 표준입니다.

$('.ecwid-SearchPanel-field').attr('placeholder', 'Search');

그러나 그것은 통과하지 못하고 있습니다. 내가 알아 차린 한 가지는 Chrome의 관리자가이 입력을 일반 html처럼 표시하지만 실제 페이지 소스는 대신 스크립트를 표시한다는 것입니다. . .

ecwid 포럼에서 얻은 코드 인 custom2.js가 있으며 KINDA가 작동합니다. . . 일종의. . . 그것은 2010 년부터이며 곧바로 JavaScript입니다. 지금은 jQuery에서 수행하려는 작업과 충돌하지 않도록 완전히 주석 처리했습니다.

사이트는 http://katherinesheetz.com/ 이며 Ecwid 검색 위젯은 사용자 정의 메뉴 아래의 사이드 바에 있습니다.

이것에 대한 도움을 주시면 대단히 감사하겠습니다. 미리 감사드립니다!

세부 정보를 추가하도록 수정 됨 :

custom2.js는 jQuery를 사용하는 custom.js와 동시에로드되고 어떤 이유로 아무 일도하지 않지만 실제로 입력 요소에 영향을 미치기 때문에 이것을 공유하고 있습니다. . .

custom2.js :

function inputPlaceholder (input, placeholder, color) {
  if (!input) return null;
  var placeholder_color = color || '#AAA';
  var default_color = input.style.color;
  if (input.value === '' || input.value == placeholder) {
    input.value = placeholder;
    input.style.color = placeholder_color;
  }
  var add_event = /*@cc_on'attachEvent'||@*/ 'addEventListener';
  input[add_event](/*@cc_on'on'+@*/'focus', function(){
    input.style.color = default_color;
    if (input.value == placeholder) {
      input.value = '';
    }
  }, false);
  input[add_event](/*@cc_on'on'+@*/'blur', function(){
    if (input.value === '') {
      input.value = placeholder;
      input.style.color = placeholder_color;
    } else {
      input.style.color = default_color;
    }
  }, false);
  input.form && input.form[add_event](/*@cc_on'on'+@*/'submit', function(){
    if (input.value == placeholder) {
      input.value = '';
    }
  }, false);

  return input;
}
function getElementsByClassName(classname, node)  {
    if(!node) node = document.getElementsByTagName("body")[0];
    var a = [];
    var re = new RegExp('\\b' + classname + '\\b');
    var els = node.getElementsByTagName("*");
    for(var i=0,j=els.length; i<j; i++)
        if(re.test(els[i].className))a.push(els[i]);
    return a;
}
function ecwid_set_placeholder() {
    var search_box = getElementsByClassName('ecwid-SearchPanel-field')[0];
    if (search_box) {
        inputPlaceholder(search_box,'Search');      
        clearInterval(ecwid_set_placeholder_interval);
    }
}
var ecwid_set_placeholder_interval;
ecwid_set_placeholder_interval = setInterval('ecwid_set_placeholder();',100);

custom.js는 기본적으로 다음과 같습니다.

(function($){
     $(document).ready(function() {
          //some other scripts for adding style to sidebar and then the relevant part. . .
          $$('.ecwid-SearchPanel-field').attr('placeholder', 'Search');
     });
})( jQuery );