javascript - tutorial - w3schools




Textarea বিনিময় সনাক্তকরণ (7)

কিভাবে জাভাস্ক্রিপ্ট ব্যবহার করে textarea পরিবর্তন ইভেন্ট সনাক্ত করবেন?
আমি টাইপ করার সময় কতগুলি অক্ষর অবশিষ্ট আছে তা সনাক্ত করার চেষ্টা করছি।

আমি অদলবদল ইভেন্ট ব্যবহার করে চেষ্টা, কিন্তু যে ফোকাস আউট যখন শুধুমাত্র কিক মনে হয়।


HTML5 ইনপুট বৈধতা / প্যাটার্ন বৈশিষ্ট্য সহ জোড়া হলে কীউপ যথেষ্ট পরিমাণে হওয়া উচিত। সুতরাং, ইনপুট যাচাই করতে এবং .checkValidity () অবস্থাতে কাজ করার জন্য একটি প্যাটার্ন (regex) তৈরি করুন। নীচের মত কিছু কাজ করতে পারে। আপনার ক্ষেত্রে আপনি একটি regex দৈর্ঘ্য মেলে চাই। আমার সমাধান এখানে ব্যবহার / ডেমো সক্ষম অনলাইন।

<input type="text" pattern="[a-zA-Z]+" id="my-input">

var myInput = document.getElementById = "my-input";

myInput.addEventListener("keyup", function(){
  if(!this.checkValidity() || !this.value){
    submitButton.disabled = true;
  } else {
    submitButton.disabled = false;
  }
});

আপনি textarea পরিবর্তন ঘটনা শুনতে এবং আপনি চান অনুযায়ী পরিবর্তন করতে পারেন। এখানে একটি উদাহরণ।

(() => {
	const textArea = document.getElementById('my_text_area');
  textArea.addEventListener('input', () => {
    let textLn =  textArea.value.length;
    if(textLn >= 100) {
      textArea.style.fontSize = '10pt';
    }

  })
})()
<html>
<textarea id='my_text_area' rows="4" cols="50" style="font-size:40pt">
This text will change font after 100.
</textarea>
</html>


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

var text = document.createElement('textarea');
text.rows = 10;
text.cols = 40;
document.body.appendChild(text);

text.onkeyup = function(){
var callcount = 0;
    var action = function(){
        alert('changed');
    }
    var delayAction = function(action, time){
        var expectcallcount = callcount;
        var delay = function(){
            if(callcount == expectcallcount){
                action();
            }
        }
        setTimeout(delay, time);
    }
    return function(eventtrigger){
        ++callcount;
        delayAction(action, 1200);
    }
}();

এটি একটি নির্দিষ্ট বিলম্বের সময়ের মধ্যে সাম্প্রতিক ইভেন্টটি বহিস্কার করলে পরীক্ষা করে কাজ করে। গুড লাক!


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

    $('div.lawyerList').on('change','textarea',function(){
      // Change occurred so count chars...
    });

অথবা

    $('textarea').on('change',function(){
      // Change occurred so count chars...
    });

এটি ২01২ এর, পিসি-এর পরের যুগে এখানে রয়েছে, এবং আমাদের এখনও এইরকম মৌলিক কিছু নিয়ে সংগ্রাম করতে হবে। এই খুব সহজ হতে হবে।

যতক্ষণ না সেই স্বপ্নটি পূর্ণ হয়, ততক্ষণ পর্যন্ত এটি করার সেরা উপায়, ক্রস-ব্রাউজার: input এবং onpropertychange ইভেন্টগুলির সমন্বয় ব্যবহার input , যেমন:

var area = container.querySelector('textarea');
if (area.addEventListener) {
  area.addEventListener('input', function() {
    // event handling code for sane browsers
  }, false);
} else if (area.attachEvent) {
  area.attachEvent('onpropertychange', function() {
    // IE-specific event handling code
  });
}

input ইভেন্টটি input যত্ন নেয় এবং onpropertychange onpropertychange যত্ন নেয় (এটি IE6 এবং 7 এর সাথেও কাজ করে তবে কিছু বাগ রয়েছে)।

input এবং onpropertychange ব্যবহার করার সুবিধা হল যে তারা অপ্রয়োজনীয়ভাবে ফায়ার করবেন না (যেমন Ctrl বা Shift কী চাপার সময়); তাই যদি আপনি একটি অপেক্ষাকৃত ব্যয়বহুল অপারেশন চালাতে চান যখন textarea বিষয়বস্তু পরিবর্তন, এই যেতে উপায়

এখন IE, সর্বদা হিসাবে, এটি সমর্থন করার অর্ধ-গাধা কাজ করে: onpropertychange থেকে অক্ষরগুলি মুছে ফেলা হলে IE onpropertychange input বা onpropertychange আগুন নেই। তাই যদি আপনি IE তে অক্ষরগুলি হ্যান্ডেল করতে চান তবে keydown ব্যবহার করুন ( keydown / keydown ব্যবহার করার বিরোধিতা করে, কারণ ব্যবহারকারীর কী চেপে ধরে এবং ব্যবহারকারীর কী চেপে ধরে থাকে সেক্ষেত্রে এটি একবারই আগুনে ফেলে)।

উত্স: http://www.alistapart.com/articles/expanding-text-areas-made-elegant/

সম্পাদন করুন: মনে হচ্ছে উপরের সমাধানটিও নিখুঁত নয়, সঠিকভাবে মন্তব্যগুলিতে উল্লেখ করা হয়েছে: addEventListener সম্পত্তি উপস্থিতিটি বোঝায় না যে আপনি একটি সরল ব্রাউজারের সাথে কাজ করছেন; অনুরূপভাবে attachEvent সম্পত্তি উপস্থিত IE বোঝানো হয় না । আপনি যদি আপনার কোডটি সত্যিই বায়ুচলাচল করতে চান তবে আপনাকে এটি পরিবর্তন করা উচিত। পয়েন্টার জন্য টিম ডাউন এর মন্তব্য দেখুন।


কোড আমি 11 জিকির ছাড়া এবং শুধুমাত্র একটি টেক্সট টেক্সারের জন্য ব্যবহার করেছি:

javascript:

// Impede que o comentário tenha mais de num_max caracteres
var internalChange= 0; // important, prevent reenter
function limit_char(max)
{ 
    if (internalChange == 1)
    {
        internalChange= 0;
        return;
    }
    internalChange= 1;
    // <form> and <textarea> are the ID's of your form and textarea objects
    <form>.<textarea>.value= <form>.<textarea>.value.substring(0,max);
}

এবং এইচটিএমএল:

<TEXTAREA onpropertychange='limit_char(5)' ...

  • গুগল ক্রোমের জন্য, ইনপুট যথেষ্ট হবে (সংস্করণ 22.0.1২২9.94 মিটার সংস্করণে উইন্ডোজ 7 এ পরীক্ষা করা হয়েছে)।
  • IE 9 এর জন্য, oninput contextmenu এবং ব্যাকস্পেসের মাধ্যমে কাটা ছাড়া সবকিছু ধরবে।
  • IE 8 এর জন্য, onpropertychange oninput ছাড়াও pasting ধরা প্রয়োজন।
  • IE 9 + 8 জন্য, onkeyup ব্যাকস্পেস ধরা প্রয়োজন।
  • IE 9 + 8 এর জন্য, onmousemove হ'ল আমি contextmenu এর মাধ্যমে কাটতে ধরা একমাত্র উপায়

ফায়ারফক্সে পরীক্ষা করা হয়নি।

    var isIE = /*@[email protected]*/false; // Note: This line breaks closure compiler...

    function SuperDuperFunction() {
        // DoSomething
    }


    function SuperDuperFunctionBecauseMicrosoftMakesIEsuckIntentionally() {
        if(isIE) // For Chrome, oninput works as expected
            SuperDuperFunction();
    }

<textarea id="taSource"
          class="taSplitted"
          rows="4"
          cols="50"
          oninput="SuperDuperFunction();"
          onpropertychange="SuperDuperFunctionBecauseMicrosoftMakesIEsuckIntentionally();"
          onmousemove="SuperDuperFunctionBecauseMicrosoftMakesIEsuckIntentionally();"
          onkeyup="SuperDuperFunctionBecauseMicrosoftMakesIEsuckIntentionally();">
Test
</textarea>




javascript