textarea 标签中placeholder提示信息手动换行（jQuery水印插件watermark.js ）

textarea中的placeholder信息有时需要作换行处理，如果利用空格填充让其内容自动换行的话，不大好控制。于是上网百度了一下，用了watermark.js 这个插件。这个插件据说还可以做水印，有兴趣的可以去了解一下。
更多watermark.js参考间链接：http://www.html580.com/9795/go

效果图查看

代码如下：

<textarea  class="easyui-validatebox jq_watermark" data-options="required:true" style="height:120px;width:300px" placeholder="一行一单，最多添加1000个！ <br/>例如：<br/>7760000007240 <br/>7760000007241<br/>  ......"></textarea>

解释如下：
1）class要注明是jq_watermark
2）在placeholder中需要换行的地方写上<br/>
3）当然还要引用一下这个watermark.js 文件

<script src="js/jquery.watermark.js"></script>

这里无法上传jquery.watermark.js这个文件
那我把这个代码贴一下吧

/*
* jQuery Watermark plugin
* @requires jQuery v1.3 or later
*
* Examples at: http://mario.ec/static/jq-watermark/
* Copyright (c) 2010 Mario Estrada
* Licensed under the MIT license:
* http://www.opensource.org/licenses/mit-license.php
*
*/


;(function ($) {
  var old_ie = /MSIE [1-7]\./.test(navigator.userAgent);
  var hard_left = 4;
  $.watermarker = function () { };
  $.extend($.watermarker, {
    defaults: {
      color: '#999',
      left: 0,
      top: 0,
      fallback: false,
      animDuration: 300,
      minOpacity: 0.6
    },
    setDefaults: function (settings) {
      $.extend($.watermarker.defaults, settings);
    },
    checkVal: function (val, label) {
      if (val.length === 0) {
        $(label).show();
      } else {
        $(label).hide();
      }

      return val.length > 0;
    },
    html5_support: function () {
      var i = document.createElement('input');
      return 'placeholder' in i;
    }
  });

  $.fn.watermark = function (text, options) {
    var elems;
    options = $.extend({}, $.watermarker.defaults, options);
    elems = this.filter('textarea, input:not(:checkbox,:radio,:file,:submit,:reset)');

    if (options.fallback && $.watermarker.html5_support()) {
      return this;
    }

    elems.each(function () {
      var $elem, attr_name, label_text, watermark_container, watermark_label, control_id;
      var e_margin_left, e_top = 0, e_height;

      $elem = $(this);
      control_id = $elem.attr('id');

      if ($elem.attr('data-jq-watermark') === 'processed') {
        return;
      }

      attr_name = $elem.attr('placeholder') !== undefined && $elem.attr('placeholder') !== '' ? 'placeholder' : 'title';
      label_text = text === undefined || text === '' ? $(this).attr(attr_name) : text;
      watermark_container = $('<span class="watermark_container"></span>');
      watermark_label = $('<label class="watermark" for="' + control_id + '">' + label_text + '</label>');

      // If used, remove the placeholder attribute to prevent conflicts
      if (attr_name === 'placeholder') {
        $elem.removeAttr('placeholder');
      }

      watermark_container.css({
        display: 'inline-block',
        position: 'relative'
      });

      if ($elem.attr('data-percent-width') === 'true') {
        watermark_container.css('width', '100%');
      }

      if ($elem.attr('data-percent-height') === 'true') {
        watermark_container.css('height', '100%');
      }

      if (old_ie) {
        watermark_container.css({
          zoom: 1,
          display: 'inline'
        });
      }

      $elem.wrap(watermark_container).attr('data-jq-watermark', 'processed');

      if (this.nodeName.toLowerCase() === 'textarea') {
        e_height = parseInt($elem.css('line-height'), 10);
        e_height = e_height === 'normal' ? parseInt($elem.css('font-size'), 10) : e_height;
        e_top = ($elem.css('padding-top') !== 'auto' ? parseInt($elem.css('padding-top'), 10) : 0);
      } else {
        e_height = $elem.outerHeight();
        if (e_height <= 0) {
          e_height = ($elem.css('padding-top') !== 'auto' ? parseInt($elem.css('padding-top'), 10) : 0);
          e_height += ($elem.css('padding-bottom') !== 'auto' ? parseInt($elem.css('padding-bottom'), 10) : 0);
          e_height += ($elem.css('height') !== 'auto' ? parseInt($elem.css('height'), 10) : 0);
        }
      }

      e_top += ($elem.css('margin-top') !== 'auto' ? parseInt($elem.css('margin-top'), 10) : 0);

      e_margin_left = $elem.css('margin-left') !== 'auto' ? parseInt($elem.css('margin-left'), 10) : 0;
      e_margin_left += $elem.css('padding-left') !== 'auto' ? parseInt($elem.css('padding-left'), 10) : 0;

      watermark_label.css({
        position: 'absolute',
        display: 'block',
        fontFamily: $elem.css('font-family'),
        fontSize: $elem.css('font-size'),
        color: options.color,
        left: hard_left + options.left + e_margin_left,
        top: options.top + e_top,
        height: e_height,
        lineHeight: e_height + 'px',
        textAlign: 'left',
        pointerEvents: 'none'
      });

      $.watermarker.checkVal($elem.val(), watermark_label);

      if (!control_id) {
        watermark_label
          .data('jq_watermark_element', $elem)
          .click(function () {
            $($(this).data('jq_watermark_element')).trigger('click').trigger('focus');
          });
      }

      $elem.before(watermark_label)
        .bind('focus.jq_watermark', function () {
          if (!$.watermarker.checkVal($(this).val(), watermark_label)){
            watermark_label.stop().fadeTo(options.animDuration, options.minOpacity);
          }
        })
        .bind('blur.jq_watermark change.jq_watermark', function () {
          if (!$.watermarker.checkVal($(this).val(), watermark_label)){
            watermark_label.stop().fadeTo(options.animDuration, 1);
          }
        })
        .bind('keydown.jq_watermark, paste.jq_watermark', function (e) {
          $(watermark_label).hide();
        })
        .bind('keyup.jq_watermark', function (e) {
          $.watermarker.checkVal($(this).val(), watermark_label);
        });
    });

    return this;
  };

  $(function () {
    $('.jq_watermark').watermark();
  });
})(jQuery);