关闭

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

标签: jqueryhtml插件textarea
421人阅读 评论(0) 收藏 举报

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);
0
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

30个非常流行的jQuery提示信息插件

来自:http://www.admin10000.com/document/305.html  在网站的设计中,提示信息是非常细微的功能,但是起着非常重要的作用。如果你的网站中提示信息做的比...
  • ArvinStudy
  • ArvinStudy
  • 2012-10-08 11:18
  • 912

js网页添加水印

////////////////////////////////////////////////// //改编摘自:http://www.cnblogs.com/daixinyu/p/6715398....
  • laigezao
  • laigezao
  • 2017-06-30 16:00
  • 945

在 Visual C# 中,如何为 TextBox 控件添加水印文字

介绍如何在 Visual C# 中,为 TextBox 控件添加水印文字功能。
  • heray1990
  • heray1990
  • 2016-04-18 16:27
  • 2981

Java 实现图片水印之水印图片(SpringMVC + Jsp)

图片水印不仅水印文字还可以是图片,本次实现图片水印之图片水印,以后有需要可以写个代码批量处理自己的图片了。 大家先看效果图代码编写1.导入相关架包2.配置XML文件 web.xml ...
  • wenteryan
  • wenteryan
  • 2016-05-10 13:17
  • 2046

iOS图片加水印效果的实现并保存至相册

图片加水印效果的实现并保存至相册
  • Zsk_Zane
  • Zsk_Zane
  • 2015-08-06 18:25
  • 3166

全兼容input/textarea标签的placeholder属性JS插件

  • 2017-12-15 10:39
  • 2KB
  • 下载

input、textarea标签placeholder兼容IE8浏览器js插件代码

input、textarea标签placeholder兼容IE8浏览器js插件代码 工作记事本 </sc
  • CodingNoob
  • CodingNoob
  • 2017-06-15 00:26
  • 432

qTip2 精致的jQuery提示信息插件

点击打开链接本文转载至 郑阳星的博客    作者:zccst(转)  三个文件:        从官方网站下载最新版本时,可以选择相应的样式及插件;可选的样式包括几种色彩风格(...
  • zuijiuhengdao
  • zuijiuhengdao
  • 2016-12-11 19:52
  • 246

qTip2 精致的jQuery提示信息插件

http://www.cnblogs.com/lwme/archive/2012/02/16/qtip2-jquery-plugin.html qTip2是一个灰常强大且精致的jQuery提示信...
  • vba_2001
  • vba_2001
  • 2012-04-05 12:01
  • 470

30个非常流行的提示信息插件(jQuery Tooltip Plugin)

在网站的设计中,提示信息是非常细微的功能,但是起着非常重要的作用。如果你的网站中提示信息做的比较好,会给浏览者留下非常深刻的印象,同时也会起到非常好的网站宣传效果,下面介绍了30个比较流行提示信息插件...
  • fangqun663775
  • fangqun663775
  • 2013-07-25 22:04
  • 1134
    个人资料
    • 访问:672次
    • 积分:12
    • 等级:
    • 排名:千里之外
    • 原创:0篇
    • 转载:2篇
    • 译文:0篇
    • 评论:0条
    文章存档