javascript - ইনহ - বাংলায় জাভাস্ক্রিপ্ট




কিভাবে প্রোটোটাইপ ব্যবহার করে একটি textarea autosize? (12)

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

তবে আমি কিছু উন্নতি পাওয়া যায়। আপনি 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;
};

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>

আমার সমাধান 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
}

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

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

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

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;
};

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

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

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

মৌলিক রুট মনে হচ্ছে:

  1. textarea এবং একটি লুকানো div রাখা একটি ধারক উপাদান তৈরি করুন
  2. জাভাস্ক্রিপ্ট ব্যবহার করে, textarea সাথে সমন্বয় করা textarea বিষয়বস্তুগুলি রাখুন
  3. ব্রাউজারটি যে DIV উচ্চতা গণনা কাজ করতে দিন
  4. কারণ ব্রাউজারটি লুকানো div রেন্ডারিং / মাপের পরিচালনা করে, আমরা স্পষ্টভাবে textarea উচ্চতা সেট করতে এড়াতে পারি।

document.addEventListener('DOMContentLoaded', () => {
    textArea.addEventListener('change', autosize, false)
    textArea.addEventListener('keydown', autosize, false)
    textArea.addEventListener('keyup', autosize, false)
    autosize()
}, false)

function autosize() {
    // Copy textarea contents to div browser will calculate correct height
    // of copy, which will make overall container taller, which will make
    // textarea taller.
    textCopy.innerHTML = textArea.value.replace(/\n/g, '<br/>')
}
html, body, textarea {
    font-family: sans-serif;
    font-size: 14px;
}

.textarea-container {
    position: relative;
}

.textarea-container > div, .textarea-container > textarea {
    word-wrap: break-word; /* make sure the div and the textarea wrap words in the same way */
    box-sizing: border-box;
    padding: 2px;
    width: 100%;
}

.textarea-container > textarea {
    overflow: hidden;
    position: absolute;
    height: 100%;
}

.textarea-container > div {
    padding-bottom: 1.5em; /* A bit more than one additional line of text. */ 
    visibility: hidden;
    width: 100%;
}
<div class="textarea-container">
    <textarea id="textArea"></textarea>
    <div id="textCopy"></div>
</div>


এখানে একটি textarea autosizing জন্য অন্য কৌশল।

  • লাইনের উচ্চতার পরিবর্তে পিক্সেলের উচ্চতা ব্যবহার করে: অনুপাতযুক্ত ফন্টটি ব্যবহার করা হলে লাইন মোড়ানো আরও সঠিক হ্যান্ডলিং।
  • ইনপুট হিসাবে আইডি বা উপাদান গ্রহণ করে
  • একটি ঐচ্ছিক সর্বাধিক উচ্চমানের প্যারামিটার গ্রহণ করে - যদি আপনি পাঠ্য এলাকাকে একটি নির্দিষ্ট আকারের বাইরে বাড়তে না দেন তবে এটি সমস্ত পর্দায় রাখুন, বিরতির বিন্যাস এড়ানোর জন্য ইত্যাদি)
  • ফায়ারফক্স 3 এবং Internet Explorer 6

কোড: (প্লেইন ভ্যানিলা জাভাস্ক্রিপ্ট)

function FitToContent(id, maxHeight)
{
   var text = id && id.style ? id : document.getElementById(id);
   if (!text)
      return;

   /* Accounts for rows being deleted, pixel value may need adjusting */
   if (text.clientHeight == text.scrollHeight) {
      text.style.height = "30px";
   }

   var adjustedHeight = text.clientHeight;
   if (!maxHeight || maxHeight > adjustedHeight)
   {
      adjustedHeight = Math.max(text.scrollHeight, adjustedHeight);
      if (maxHeight)
         adjustedHeight = Math.min(maxHeight, adjustedHeight);
      if (adjustedHeight > text.clientHeight)
         text.style.height = adjustedHeight + "px";
   }
}

ডেমো: (jQuery ব্যবহার করে, টেক্সারেয়ার টার্গেটগুলি আমি এখন টাইপ করছি - যদি আপনার Firebug ইনস্টল থাকে তবে উভয় নমুনা কনসোলে পেস্ট করুন এবং এই পৃষ্ঠায় পরীক্ষা করুন)

$("#post-text").keyup(function()
{
   FitToContent(this, document.documentElement.clientHeight)
});

এখানে একটি টেক্সট এলাকা আকার পরিবর্তন করার একটি প্রোটোটাইপ সংস্করণ যা টেক্সটের মধ্যে কলামের সংখ্যা নির্ভর করে না। এটি একটি উন্নততর কৌশল কারণ এটি আপনাকে 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);
  });   
});

এখানে জেরেমি 4 জুন পোস্ট করা প্রোটোটাইপ উইজেটের একটি এক্সটেনশন রয়েছে:

আপনি টেক্সটের মধ্যে সীমা ব্যবহার করছেন যদি ব্যবহারকারী আরও অক্ষর প্রবেশ থেকে থামায়। অক্ষর বাকি থাকলে এটি পরীক্ষা করে। ব্যবহারকারী টেক্সট Textaa মধ্যে টেক্সট কপি, টেক্সট সর্বোচ্চ কাটা বন্ধ করা হয়। দৈর্ঘ্য:

/**
 * Prototype Widget: Textarea
 * Automatically resizes a textarea and displays the number of remaining chars
 * 
 * From: http://.com/questions/7477/autosizing-textarea
 * 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'
    });

    // Keep the text/character count inside the limits:
    if($F(this.textarea).length > this.options.get('max_length')){
      text = $F(this.textarea).substring(0, this.options.get('max_length'));
        this.textarea.value = text;
        return false;
    }

    var remaining = this.options.get('max_length') - $F(this.textarea).length;
    this._remainingCharacters.update(Math.abs(remaining)  + ' characters remaining'));
  }
});

নীচের লিঙ্কে ক্লিক করুন: 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
    });
});

শুধু এটি পুনর্বিবেচনার, আমি এটি একটি সামান্য বিট তৈরি করেছি (যদিও 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');

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

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 কিভাবে শৈলী (লাইন-উচ্চতা, প্যাডিং এবং স্টাফ ধরনের) উপর নির্ভর করে।





prototypejs