JQuery 텍스트 상자 워터마크 플러그인의 간단한 실현

5599 단어 jquery
JQuery를 사용하여 텍스트 상자의 워터마크 효과를 다음과 같이 쉽게 구현할 수 있습니다.

코드 세그먼트, 워터마크 효과를 적용할 텍스트 상자의 스타일을 정의합니다:


.watermark { color: #cccccc; }


JavaScript 코드를 JQuery의 플러그인으로 봉함:


(function ($) {
    $.fn.watermark = function (options) {
        var settings = $.extend({
            watermarkText: "Input something here",
            className: "watermark"
        }, options);

        return this.each(function () {
       if ($(this).val().length == 0 || $(this).val() == settings.watermarkText) {   
//init, set watermark text and class   $(this).val(settings.watermarkText).addClass(settings.className);
       }
//if blur and no value inside, set watermark text and class again. $(this).blur(function () { if ($(this).val().length == 0) { $(this).val(settings.watermarkText).addClass(settings.className); } }); //if focus and text is watermrk, set it to empty and remove the watermark class $(this).focus(function () { if ($(this).val() == settings.watermarkText) { $(this).val('').removeClass(settings.className); } }); }); } })(jQuery);


다음 페이지에서 직접 사용:


<div class="search_box">
    <input id="tb_search" type="text" />
</div>

<script type="text/javascript">
    $(document).ready(function () {
        $("#tb_search").watermark({
            watermarkText: "    ",
            className: "watermark",
        });
    });
</script>


원문 주소: http://www.mkyong.com/jquery/jquery-watermark-effect-on-text-input/



좋은 웹페이지 즐겨찾기