javascript ইনহ কিভাবে প্রোটোটাইপ ব্যবহার করে একটি textarea autosize?




বাংলায় জাভাস্ক্রিপ্ট (15)

@ ম্যামিকালের উত্তর ভালো লেগেছে।

তবে আমি কিছু উন্নতি পাওয়া যায়। আপনি jQuery height() ফাংশন ব্যবহার করতে পারেন। কিন্তু প্যাডিং-শীর্ষ এবং প্যাডিং-নীচে পিক্সেল সম্পর্কে সচেতন থাকুন। অন্যথায় আপনার textarea খুব দ্রুত বৃদ্ধি হবে।

$(document).ready(function() {
  $textarea = $("#my-textarea");

  // There is some diff between scrollheight and height:
  //    padding-top and padding-bottom
  var diff = $textarea.prop("scrollHeight") - $textarea.height();
  $textarea.live("keyup", function() {
    var height = $textarea.prop("scrollHeight") - diff;
    $textarea.height(height);
  });
});

আমি বর্তমানে যে কোম্পানির জন্য কাজ করি তার জন্য একটি অভ্যন্তরীণ বিক্রয় অ্যাপ্লিকেশনে কাজ করছি এবং আমার কাছে একটি ফর্ম রয়েছে যা ব্যবহারকারীকে বিতরণ ঠিকানা পরিবর্তন করতে দেয়।

এখন আমি মনে করি এটি অনেক নিকৃষ্ট হবে, যদি আমি টেক্সট ঠিকানাটি প্রধান ঠিকানা বিশদের জন্য ব্যবহার করি তবে পাঠ্যটি কেবলমাত্র এটির পাঠ্য এলাকাটি গ্রহণ করবে এবং পাঠ্য পরিবর্তিত হলে স্বয়ংক্রিয়ভাবে পুনরায় আকার পরিবর্তন করবে।

এখানে এটি বর্তমানে একটি স্ক্রিনশট।

কোন ধারনা?

@Chris

একটি ভাল বিন্দু, কিন্তু আমি এটা আকার পরিবর্তন করতে চান কারণ আছে। আমি যে এলাকাটি এটিতে থাকা তথ্যটির এলাকা হিসাবে গ্রহণ করতে চাই। আপনি স্ক্রিন শটতে দেখতে পারেন, যদি আমার একটি নির্দিষ্ট টেক্সটরিয়া থাকে তবে এটি উল্লম্ব স্থানটির ন্যায্য ওয়েক নেয়।

আমি ফন্ট কমাতে পারি, তবে আমার ঠিকানাটি বড় এবং পাঠযোগ্য হতে হবে। এখন আমি পাঠ্য এলাকার আকার হ্রাস করতে পারি, কিন্তু তারপরে আমার এমন সমস্যা রয়েছে যাদের কাছে একটি ঠিকানা লাইন আছে যা 3 বা 4 লাগে (একটি 5 লাগে)। ব্যবহারকারী একটি স্ক্রলবার ব্যবহার করার প্রয়োজন একটি প্রধান নাম্বার নেই।

আমি একটি বিট আরো নির্দিষ্ট করা উচিত অনুমান। আমি উল্লম্ব আকার পরিবর্তন করার পরে, এবং প্রস্থ যতটা ব্যাপার না। এর সাথে একমাত্র সমস্যা, উইন্ডোটির প্রস্থ খুব ছোট (যখন আপনি স্ক্রিনশটটিতে দেখতে পারেন) ঠিকানাটির অধীনে ISO নম্বরটি (বড় "1") push করা হয়।

এটি একটি gimick হচ্ছে না; এটি এমন একটি টেক্সট ফিল্ড থাকার যা ব্যবহারকারী সম্পাদনা করতে পারে যা অপ্রয়োজনীয় স্থান গ্রহণ করবে না তবে এতে সমস্ত পাঠ্য প্রদর্শিত হবে।

যদিও কেউ সমস্যাটির দিকে এগিয়ে যাওয়ার অন্য কোন উপায় নিয়ে আসে তবে আমিও তার জন্য উন্মুক্ত।

আমি কোডটি একটু সংশোধন করেছি কারণ এটি সামান্য অদ্ভুত কাজ করছে। আমি কী-এ সক্রিয় করার জন্য এটি পরিবর্তন করেছি, কারণ এটি শুধুমাত্র টাইপ করা চরিত্রটির বিবেচনায় নেবে না।

resizeIt = function() {
  var str = $('iso_address').value;
  var cols = $('iso_address').cols;
  var linecount = 0;

  $A(str.split("\n")).each(function(l) {
    linecount += 1 + Math.floor(l.length / cols); // Take into account long lines
  })

  $('iso_address').rows = linecount;
};

সম্ভবত সংক্ষিপ্ততম সমাধান:

jQuery(document).ready(function(){
    jQuery("#textArea").on("keydown keyup", function(){
        this.style.height = "1px";
        this.style.height = (this.scrollHeight) + "px"; 
    });
});

এই ভাবে আপনি যে কোনো লুকানো divs বা এরকম কিছু প্রয়োজন হবে না।

দ্রষ্টব্য: আপনাকে এই। this.style.height = (this.scrollHeight) + "px"; দিয়ে খেলতে হতে পারে this.style.height = (this.scrollHeight) + "px"; আপনি textarea কিভাবে শৈলী (লাইন-উচ্চতা, প্যাডিং এবং স্টাফ ধরনের) উপর নির্ভর করে।


@memical সাথে @memical উচ্চতা নির্ধারণের জন্য একটি দুর্দান্ত সমাধান ছিল, কিন্তু আমার অ্যাপ্লিকেশনের জন্য আমি @memical উচ্চতা বৃদ্ধি করতে সমর্থ ছিলাম কারণ ব্যবহারকারী আরও সামগ্রী যুক্ত করেছিল। আমি নিম্নলিখিত সঙ্গে স্মৃতির সমাধান বন্ধ নির্মিত:

$(document).ready(function() {
    var $textarea = $("p.body textarea");
    $textarea.css("height", ($textarea.attr("scrollHeight") + 20));
    $textarea.keyup(function(){
        var current_height = $textarea.css("height").replace("px", "")*1;
        if (current_height + 5 <= $textarea.attr("scrollHeight")) {
            $textarea.css("height", ($textarea.attr("scrollHeight") + 20));
        }
    });
});

এটি খুব মসৃণ নয় তবে এটি একটি ক্লায়েন্ট মুখোমুখি অ্যাপ্লিকেশন নয়, তাই মসৃণতা সত্যিই গুরুত্বপূর্ণ নয়। (এই ক্লায়েন্ট মুখোমুখি ছিল, আমি সম্ভবত একটি স্বয়ংক্রিয় পুনরায় আকার jQuery প্লাগইন ব্যবহার করা হবে।)


এখানে JQuery সঙ্গে একটি সমাধান:

$(document).ready(function() {
    var $abc = $("#abc");
    $abc.css("height", $abc.attr("scrollHeight"));
})

abc একটি teaxtarea


আমি আমার জন্য এই ফাংশন প্রয়োজন, কিন্তু আমি তাদের প্রয়োজন হিসাবে এখানে থেকে কেউ কাজ করে।

তাই আমি অরিয়ন কোড ব্যবহার করে এটি পরিবর্তন করেছি।

আমি একটি সর্বনিম্ন উচ্চতা যোগ করা, যাতে ধ্বংস উপর এটি খুব ছোট না।

function resizeIt( id, maxHeight, minHeight ) {
    var text = id && id.style ? id : document.getElementById(id);
    var str = text.value;
    var cols = text.cols;
    var linecount = 0;
    var arStr = str.split( "\n" );
    $(arStr).each(function(s) {
        linecount = linecount + 1 + Math.floor(arStr[s].length / cols); // take into account long lines
    });
    linecount++;
    linecount = Math.max(minHeight, linecount);
    linecount = Math.min(maxHeight, linecount);
    text.rows = linecount;
};

আমার সমাধান jQuery ব্যবহার করে না (কারণ কখনও কখনও তারা একই জিনিস হতে হবে না) নিচে। যদিও এটি শুধুমাত্র Internet Explorer 7 পরীক্ষা করা হয়েছিল, তাই সম্প্রদায়টি এই সমস্ত ভুলগুলি ইঙ্গিত দিতে পারে:

textarea.onkeyup = function () { this.style.height = this.scrollHeight + 'px'; }

এ পর্যন্ত আমি সত্যিই এটি কীভাবে কাজ করি তা পছন্দ করি এবং আমি অন্য ব্রাউজারগুলির ব্যাপারে উদ্বিগ্ন নই, তাই সম্ভবত এটি আমার সমস্ত টেক্সটেয়ারগুলিতে প্রয়োগ করব:

// Make all textareas auto-resize vertically
var textareas = document.getElementsByTagName('textarea');

for (i = 0; i<textareas.length; i++)
{
    // Retain textarea's starting height as its minimum height
    textareas[i].minHeight = textareas[i].offsetHeight;

    textareas[i].onkeyup = function () {
        this.style.height = Math.max(this.scrollHeight, this.minHeight) + 'px';
    }
    textareas[i].onkeyup(); // Trigger once to set initial height
}

শুধু এটি পুনর্বিবেচনার, আমি এটি একটি সামান্য বিট তৈরি করেছি (যদিও Prototype / জাভাস্ক্রিপ্ট উপর পূর্ণ বোতল যে কেউ উন্নতি সুপারিশ করতে পারে?)।

var TextAreaResize = Class.create();
TextAreaResize.prototype = {
  initialize: function(element, options) {
    element = $(element);
    this.element = element;

    this.options = Object.extend(
      {},
      options || {});

    Event.observe(this.element, 'keyup',
      this.onKeyUp.bindAsEventListener(this));
    this.onKeyUp();
  },

  onKeyUp: function() {
    // We need this variable because "this" changes in the scope of the
    // function below.
    var cols = this.element.cols;

    var linecount = 0;
    $A(this.element.value.split("\n")).each(function(l) {
      // We take long lines into account via the cols divide.
      linecount += 1 + Math.floor(l.length / cols);
    })

    this.element.rows = linecount;
  }
}

শুধু এটি সঙ্গে কল:

new TextAreaResize('textarea_id_name_here');

ASP.NET ব্যবহার করে, কেবল কেবল এটি করুন:

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Automatic Resize TextBox</title>
        <script type="text/javascript">
            function setHeight(txtarea) {
                txtarea.style.height = txtdesc.scrollHeight + "px";
            }
        </script>
    </head>

    <body>
        <form id="form1" runat="server">
            <asp:TextBox ID="txtarea" runat= "server" TextMode="MultiLine"  onkeyup="setHeight(this);" onkeydown="setHeight(this);" />
        </form>
    </body>
</html>

এখানে একটি টেক্সট এলাকা আকার পরিবর্তন করার একটি প্রোটোটাইপ সংস্করণ যা টেক্সটের মধ্যে কলামের সংখ্যা নির্ভর করে না। এটি একটি উন্নততর কৌশল কারণ এটি আপনাকে CSS এর মাধ্যমে পাঠ্য এলাকা নিয়ন্ত্রণ করতে এবং সেইসাথে পরিবর্তনশীল প্রস্থ টেক্সেরিয়াকে নিয়ন্ত্রণ করতে দেয়। উপরন্তু, এই সংস্করণ অবশিষ্ট অক্ষর সংখ্যা প্রদর্শন করে। অনুরোধ না করে, এটি একটি বেশ দরকারী বৈশিষ্ট্য এবং অবাঞ্ছিত যদি সহজে সরানো হয়।

//inspired by: http://github.com/jaz303/jquery-grab-bag/blob/63d7e445b09698272b2923cb081878fd145b5e3d/javascripts/jquery.autogrow-textarea.js
if (window.Widget == undefined) window.Widget = {}; 

Widget.Textarea = Class.create({
  initialize: function(textarea, options)
  {
    this.textarea = $(textarea);
    this.options = $H({
      'min_height' : 30,
      'max_length' : 400
    }).update(options);

    this.textarea.observe('keyup', this.refresh.bind(this));

    this._shadow = new Element('div').setStyle({
      lineHeight : this.textarea.getStyle('lineHeight'),
      fontSize : this.textarea.getStyle('fontSize'),
      fontFamily : this.textarea.getStyle('fontFamily'),
      position : 'absolute',
      top: '-10000px',
      left: '-10000px',
      width: this.textarea.getWidth() + 'px'
    });
    this.textarea.insert({ after: this._shadow });

    this._remainingCharacters = new Element('p').addClassName('remainingCharacters');
    this.textarea.insert({after: this._remainingCharacters});  
    this.refresh();  
  },

  refresh: function()
  { 
    this._shadow.update($F(this.textarea).replace(/\n/g, '<br/>'));
    this.textarea.setStyle({
      height: Math.max(parseInt(this._shadow.getHeight()) + parseInt(this.textarea.getStyle('lineHeight').replace('px', '')), this.options.get('min_height')) + 'px'
    });

    var remaining = this.options.get('max_length') - $F(this.textarea).length;
    this._remainingCharacters.update(Math.abs(remaining)  + ' characters ' + (remaining > 0 ? 'remaining' : 'over the limit'));
  }
});

new Widget.Textarea('element_id') উইজেট new Widget.Textarea('element_id') কল করে উইজেট তৈরি করুন। ডিফল্ট বিকল্পগুলি একটি বস্তু হিসাবে তাদের পাশ দিয়ে ওভাররাইড করা যেতে পারে, যেমন new Widget.Textarea('element_id', { max_length: 600, min_height: 50}) । আপনি যদি পৃষ্ঠাতে সমস্ত টেক্সচারের জন্য এটি তৈরি করতে চান তবে কিছু করুন:

Event.observe(window, 'load', function() {
  $$('textarea').each(function(textarea) {
    new Widget.Textarea(textarea);
  });   
});

IE এর জন্য কোডিং এবং এই সমস্যা সম্মুখীন যারা জন্য। IE একটি সামান্য কৌশল যে এটি 100% সিএসএস করে তোলে।

<TEXTAREA style="overflow: visible;" cols="100" ....></TEXTAREA>

আপনি এমনকি সারি = "n" এর জন্য একটি মান প্রদান করতে পারেন যা IE উপেক্ষা করবে, তবে অন্য ব্রাউজারগুলি ব্যবহার করবে। আমি সত্যিই কোড হ্যাক যে IE হ্যাক প্রয়োগ, কিন্তু এই এক খুব সহায়ক। এটা সম্ভব যে এটি শুধুমাত্র Quirks মোডে কাজ করে।


ইন্টারনেট এক্সপ্লোরার, সাফারি, ক্রোম এবং Opera ব্যবহারকারীদের অবশ্যই CSS- এ লাইন-উচ্চতার মান নির্ধারণ করতে মনে রাখতে হবে। আমি স্টাইলশীটটি করি যা নিম্নরূপ সকল পাঠ্য বাক্সগুলির জন্য প্রাথমিক সঠিকতা নির্ধারণ করে।

<style>
    TEXTAREA { line-height: 14px; font-size: 12px; font-family: arial }
</style>

এখানে একটি ফাংশন যা আমি জাভাস্ক্রিপ্টে লিখেছি এটি করতে - আপনি এটি Prototype পোর্ট করতে পারেন, তবে তারা জাভাস্ক্রিপ্টের "লিভেনি" সমর্থন করে না তাই অ্যাজাক্স অনুরোধগুলি দ্বারা যোগ করা উপাদানগুলিতে সাড়া দেওয়া হবে না।

এই সংস্করণটি শুধুমাত্র প্রসারিত হয় না, তবে এটি মুছে ফেলা বা ব্যাকস্পেস চাপলেও চুক্তি হয়।

এই সংস্করণ jQuery 1.4.2 উপর নির্ভর করে।

উপভোগ করুন;)

http://pastebin.com/SUKeBtnx

ব্যবহার:

$("#sometextarea").textareacontrol();

অথবা (উদাহরণস্বরূপ কোনও jQuery নির্বাচক)

$("textarea").textareacontrol();

এটি Internet Explorer 7 / Internet Explorer 8 , ফায়ারফক্স 3.5 এবং ক্রোমে পরীক্ষা করা হয়েছিল। সব ঠিক কাজ করে।


ফেসবুক এটি করে, যখন আপনি মানুষের দেয়ালগুলিতে লিখেন, তবে কেবল উল্লম্বভাবে আকার পরিবর্তন করে।

অনুভূমিক আকারের পরিবর্তন আমাকে শব্দ-মোড়ানো, লম্বা লাইন ইত্যাদি কারণে একটি জগাখিচুড়ি হিসাবে হ্রাস করে, তবে উল্লম্ব আকারটি বেশ নিরাপদ এবং সুন্দর বলে মনে হয়।

আমি যে ফেসবুক ব্যবহার করে নতুন কিছু শিখি তা সম্পর্কে কখনোই কিছু উল্লেখ করেনি বা বিভ্রান্ত হয়েছে। আমি এটিকে অগ্রিম প্রমাণ হিসাবে ব্যবহার করবো 'এগিয়ে যান, এটি বাস্তবায়ন করুন'।

Prototype ব্যবহার করে কিছু জাভাস্ক্রিপ্ট কোড এটি করতে (কারণ আমি এটি সম্পর্কে পরিচিত):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <script src="http://www.google.com/jsapi"></script>
        <script language="javascript">
            google.load('prototype', '1.6.0.2');
        </script>
    </head>

    <body>
        <textarea id="text-area" rows="1" cols="50"></textarea>

        <script type="text/javascript" language="javascript">
            resizeIt = function() {
              var str = $('text-area').value;
              var cols = $('text-area').cols;

              var linecount = 0;
              $A(str.split("\n")).each( function(l) {
                  linecount += Math.ceil( l.length / cols ); // Take into account long lines
              })
              $('text-area').rows = linecount + 1;
            };

            // You could attach to keyUp, etc. if keydown doesn't work
            Event.observe('text-area', 'keydown', resizeIt );

            resizeIt(); //Initial on load
        </script>
    </body>
</html>

PS: স্পষ্টতই এই জাভাস্ক্রিপ্ট কোডটি খুব সাদাসিধা এবং ভালভাবে পরীক্ষা করা হয় না এবং সম্ভবত আপনি এটিতে উপন্যাসগুলির সাথে পাঠ্যবক্সগুলিতে এটি ব্যবহার করতে চান না তবে আপনি সাধারণ ধারণাটি পান।


নীচের লিঙ্কে ক্লিক করুন: http://james.padolsey.com/javascript/jquery-plugin-autoresize/

$(document).ready(function () {
    $('.ExpandableTextCSS').autoResize({
        // On resize:
        onResize: function () {
            $(this).css({ opacity: 0.8 });
        },
        // After resize:
        animateCallback: function () {
            $(this).css({ opacity: 1 });
        },
        // Quite slow animation:
        animateDuration: 300,
        // More extra space:
        extraSpace:20,
        //Textarea height limit
        limit:10
    });
});

আমি বেশ কিছু সহজ করেছি। প্রথমে আমি TextArea একটি DIV তে রাখি। দ্বিতীয়, আমি এই স্ক্রিপ্টের জন্য ready ফাংশন উপর কল করেছি।

<div id="divTable">
  <textarea ID="txt" Rows="1" TextMode="MultiLine" />
</div>

$(document).ready(function () {
  var heightTextArea = $('#txt').height();
  var divTable = document.getElementById('divTable');
  $('#txt').attr('rows', parseInt(parseInt(divTable .style.height) / parseInt(altoFila)));
});

সহজ। এটি একবার প্রদত্ত হওয়ার পরে ডিভিটির সর্বাধিক উচ্চতা, এক সারির একটি টেক্সটআয়ের উচ্চতা দ্বারা বিভক্ত।





prototypejs