Rumah > hujung hadapan web > tutorial js > Jquery melaksanakan ketinggian penyesuaian textarea mengikut kandungan teks_jquery

Jquery melaksanakan ketinggian penyesuaian textarea mengikut kandungan teks_jquery

WBOY
Lepaskan: 2016-05-16 16:05:57
asal
1299 orang telah melayarinya

Satu perincian yang mungkin kami perhatikan semasa bermain Weibo ialah ketinggian kotak teks lalai yang diberikan kepada anda oleh Sina Weibo atau Tencent Weibo apabila memajukan dan mengulas Ini mungkin disebabkan oleh pengehadan berkaitan dengan fakta bahawa pengguna biasanya hanya menyiarkan semula atau mengulas pada ayat pendek. Tetapi apabila anda memasukkan lebih daripada satu baris teks, ketinggian kotak teks dinaikkan secara automatik, yang sangat meningkatkan pengalaman supaya pengguna dapat melihat semua teks. Tidak perlu menyeret bar skrol kotak teks.

autoTextarea.js

(function($){
  $.fn.autoTextarea = function(options) {
    var defaults={
      maxHeight:null,
      minHeight:$(this).height()
    };
    var opts = $.extend({},defaults,options);
    return $(this).each(function() {
      $(this).bind("paste cut keydown keyup focus blur",function(){
        var height,style=this.style;
        this.style.height = opts.minHeight + 'px';
        if (this.scrollHeight > opts.minHeight) {
          if (opts.maxHeight && this.scrollHeight > opts.maxHeight) {
            height = opts.maxHeight;
            style.overflowY = 'scroll';
          } else {
            height = this.scrollHeight;
            style.overflowY = 'hidden';
          }
          style.height = height + 'px';
        }
      });
    });
  };
})(jQuery);
Salin selepas log masuk

demo.js

$(".doctable textarea").autoTextarea({
  maxHeight:400,
  minHeight:100
});
Salin selepas log masuk

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia dapat membantu semua orang mempelajari jQuery.

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan