TEXTAREA label placeholder hint message manual wrap (jquery watermark plugin watermark.js) __js

TextArea in the placeholder information sometimes need to do line processing, if the use of space to fill the contents of the Word automatically, not good control. So the internet Baidu a bit, using the Watermark.js this plugin. This plugin is said to be able to do watermark, interested can go to understand.
More Watermark.js Reference Links: http://www.html580.com/9795/go

Effect Chart view

The code is as follows:

<textarea  class= "Easyui-validatebox jq_watermark data-options=" required:true "style=" height:120px;width : 300px "placeholder=" a single line, add up to 1000. <br/> For example: <br/>7760000007240 <br/>7760000007241<br/> ...  "></textarea>

Explained as follows:
1 class to indicate is Jq_watermark
2 Write <br/> in the place where you need to change lines in placeholder
3) Of course, we also need to quote this watermark.js file

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

There's no way to upload jquery.watermark.js this file.
Then I'll put this code on.

* * jquery Watermark plugin * @requires jquery v1.3 or later * * Examples at:http://mario.ec/static/jq-watermark/* Copy


Right (c) Mario Estrada * Licensed under 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, a nimduration:300, minopacity:0.6}, Setdefaults:function (settings) {$.extend ($.watermarker.default
    s, 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. Remo
      Veattr (' 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 '): 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_margi N_left, Top: Options.top + e_top, height:e_height, lineheight:e_height + ' px ', textAlign: ' Left ', PO

      Interevents: ' 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.chec Kval ($ (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);