유령 텍스트 구현 jquery

유령 텍스트의 경우 http://www.dinnermint.org/blog/share/jquery-ghost-text-plugin/에서이 방법을 사용합니다.유령 텍스트 구현 jquery

입력란 글꼴 크기 및 색상 (CSS에서)을 12px 및 # 666으로 설정했습니다.

타이핑을 시작할 때 글꼴 크기를 # 000 & (글꼴 크기는 13px)으로 지정합니다. 즉, 고스트 텍스트의 색상이 흐릿하고 글꼴이 작아야합니다. (위에 제공된 링크의 예제와 같이).

친절히 도움.

2010-12-04 ptamzz

플러그인은 그 안에이 작업을 수행 :

$(this).addClass("disabled");

을이 자리 표시 자 텍스트를 사용하는 경우. 그래서, 당신은 당신의 CSS에서 같은 것을 넣어 할 수 있어야한다 :

input { 
    font-size: 13px; 
    color: #000; 
} 
input.disabled { 
    font-size: 12px; 
    color: #666; 
}

그런 글꼴 크기가 이상한 시각 효과가 발생할 수 있습니다 변경하지만 당신은 명시 적으로 높이를 사용하여 이러한 일을 방지 할 수 있습니다. 당신은 아마도 색상을 변경하고 폰트 크기를 IMHO로 일정하게 유지하는 것이 나을 것입니다.

동일한 작업을 수행 할 수도 있습니다.이 작업은 placeholder 대신 title 속성을 사용하고 포함 된 양식이 제출되면 자리 표시 자 텍스트도 지 웁니다.

(function($) { 

    $.fn.egText = function(options) { 
     options = $.extend({ }, $.fn.egText.defaults, options || { }); 
     var $all = this; 
     $all.focus(function() { 
       var $this = $(this); 
       if(!$this.data(options.dataKey)) 
        $this.data(options.dataKey, 'yes').removeClass(options.egClass).val(''); 
      })   
      .blur(function() { 
       var $this = $(this); 
       if($this.val() == '') 
        $this.addClass(options.egClass).removeData(options.dataKey).val($this.attr('title')); 
       else    
        $this.data(options.dataKey, 'yes'); 
      })   
      .blur();  
     $.unique($all.closest('form')).submit(function() { 
      $all.each(function() { 
       var $this = $(this); 
       if(!$this.data(options.dataKey)) 
        $this.val('');  
      });   
      return true; 
     });  
    }; 

    $.fn.egText.defaults = { 
     dataKey: 'egText', // The key we use for storing our state with .data(), just in case there are conflicts... 
     egClass: 'lolite' // The CSS class to add to the <input> when we're displaying the example text. 
    }; 

})(jQuery);

출처

2010-12-04 08:11:15

감사 :

여기 내 코드에 대한 좀 더 많은 정보 쓴 위의 코드와도 기사에 대한 내 working ghost text example입니다. 도움이되었습니다. :) – ptamzz

동일한 목표를 달성 할 수있는 대체/단순한 (예를 들어 덜 강력하지만) 예가 있습니다.

jQuery는 'ghost-text'클래스가 적용된 모든 항목에 자동으로 적용되며 페이지로드시 값이 유령 텍스트라고 가정합니다. 당신이 입력이 방금 유령 텍스트 클래스과 같이 스타일을 할 수 보는 방법을

$(document).ready(function(){ 
    $('.ghost-text').each(function(){ 
     var d = $(this).val(); 
     $(this).focus(function(){ 
      if ($(this).val() == d){ 
       $(this).val('').removeClass('ghost-text'); 
      } 
     }); 
     $(this).blur(function(){ 
      if ($(this).val() == ''){ 
       $(this).val(d).addClass('ghost-text'); 
      } 
     }); 
    }); 
});

그래서, 변경합니다 : 기본 크기와 회색보다 조금 작은 것

.ghost-text{ 
    font-size:.9em; 
    color:#ccc; 
}

, 나는 유령 텍스트를 개인적으로 이탤릭체로 만들고 싶다. jQuery Ghost Text on programming.linnnk

출처

2011-02-18 18:54:05 Luke

유령 텍스트 구현 jquery

답변

관련 문제