2012-10-02 3 views
3

자리 표시 자 데이터가있는 검도 UI datepicker가 있습니다. 여기에 HTML은 다음과 같습니다검도 UI - 자리 표시 자 - 스타일

여기
<input type="text" class="datepicker"' placeholder="yyyy-mm-dd" /> 

는 자바 스크립트입니다 :

var start = $(".datepicker").kendoDatePicker({ 
     format: "yyyy-MM-dd", 
     parseFormats: ["MM/dd/yyyy"], 
     change: startChange 
    }).data("kendoDatePicker"); 

사용자가 데이터를 입력 한 것과 같은 스타일로 자리 데이터를 표시 날짜 선택기 검도 UI. 자리 표시 자 데이터의 스타일을 다르게 지정하고 싶습니다. 특히 텍스트를 회색 및 이탤릭체로 표시하고 싶습니다. 사용자가 데이터를 입력하면 스타일이 검정색 (기울임 꼴이 아닌)으로 바뀝니다. 이 작업을 수행하는 방법에 대한 의견이 있으십니까?

답변

5

글쎄, placeholder은 HTML5 속성이므로 검도 컨트롤에 특유한 것은 아닙니다. 내가 이해 하듯이 Kendo는 브라우저가 지원하는 것 이상으로 자리 표시 자에 대한 지원을 제공하지 않으며 일부 브라우저에서만이 속성을 지원합니다. IE는 그렇지 않습니다. 어쨌든 자리 표시 자의 스타일을 지정하려면 공급 업체 접두어 CSS 속성 인 see here을 사용해야합니다.

3

나는 this..it 당신의 HTML에서 작동합니다 사용하고도 그 스타일을 지정할 수 있습니다 :

<script> 
    // This adds 'placeholder' to the items listed in the jQuery .support object. 
    jQuery(function() { 
     jQuery.support.placeholder = false; 
     test = document.createElement('input'); 
     if('placeholder' in test) jQuery.support.placeholder = true; 
    }); 
    // This adds placeholder support to browsers that wouldn't otherwise support it. 
    $(function() { 
     if(!$.support.placeholder) { 
      var active = document.activeElement; 
      $(':text').focus(function() { 
       if ($(this).attr('placeholder') != '' && $(this).val() == $(this).attr('placeholder')) { 
        $(this).val('').removeClass('hasPlaceholder'); 
       } 
      }).blur(function() { 
       if ($(this).attr('placeholder') != '' && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) { 
        $(this).val($(this).attr('placeholder')).addClass('hasPlaceholder'); 
       } 
      }); 
      $(':text').blur(); 
      $(active).focus(); 
      $('form:eq(0)').submit(function() { 
       $(':text.hasPlaceholder').val(''); 
      }); 
     } 
    }); 
    </script>