উত্তর:
আপনার এটি ব্যবহার করতে হবে onkeyup এবং এর onchange জন্য। ওভেনচ প্রসঙ্গ-মেনু পেস্ট করা রোধ করবে এবং প্রতিটি কী-স্ট্রোকের জন্য অনকিপ চালানো হবে।
কোড নমুনার জন্য কীভাবে পাঠ্যআরিয়ায় সর্বোচ্চতা আরোপ করা যায় সে সম্পর্কে আমার উত্তর দেখুন ।
onkeyupইনপুট সনাক্তকরণের জন্য একটি ভয়ানক ঘটনা। ব্যবহার করুন oninputএবং onpropertychange(আইই সমর্থনের জন্য)।
onchangeহয় না ।
এটি ২০১২, পিসি-পরবর্তী যুগ এখানে, এবং আমাদের এখনও এটির মতো মৌলিক কিছু নিয়ে লড়াই করতে হবে। এটি খুব সহজ হওয়া উচিত ।
যতক্ষণ না স্বপ্নটি পূর্ণ হয়, ততক্ষণ পর্যন্ত এটি করার সর্বোত্তম উপায়, ক্রস ব্রাউজার: এবং ইভেন্টগুলির সংমিশ্রণটি ব্যবহার করুনinputonpropertychange :
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ঘটনা যত্ন নেয় IE9 + মুক্তিযোদ্ধা, ক্রোম, অপেরা এবং সাফারি , এবং onpropertychangeযত্ন নেয় IE8 (এটা এছাড়াও IE6 এবং 7 সাথে কাজ করে, কিন্তু কিছু বাগ আছে)।
ব্যবহার করার সুবিধা inputএবং onpropertychangeএটি হ'ল তারা অযথা আগুন জ্বালায় না (যেমন কী Ctrlবা Shiftকীগুলি টিপানোর সময়); সুতরাং আপনি যদি টেক্সারিয়ার সামগ্রী পরিবর্তন করে তুলনামূলকভাবে ব্যয়বহুল অপারেশন চালনা করতে চান তবে এই পথ চলতে হবে ।
এখন ইন্টারনেট, হিসাবে সবসময়, এই সমর্থন একটি অর্ধ assed পেশা আছে: তন্ন তন্ন inputনা onpropertychangeIE তে দাবানল যখন অক্ষর মুছে ফেলা পাঠ্য এলাকা থেকে। সুতরাং আপনার যদি IE এর অক্ষর মুছতে হ্যান্ডেল করতে হয় তবে ব্যবহার করুন keypress( keyup/ ব্যবহার করার বিপরীতে keydown, কারণ তারা কেবল একবার চাপ দিলে এমনকি ব্যবহারকারী চেপে ধরে কী ধরে রাখে) fire
সূত্র: http://www.alistapart.com/articles/expanding-text-areas- made- elegant/
সম্পাদনা: এটি এমনকি উপরের সমাধানটি নিখুঁত নয় বলে মন্তব্যগুলিতে যথাযথভাবে উল্লেখ করা হয়েছে: addEventListenerটেক্সারিয়ায় সম্পত্তির উপস্থিতি বোঝায় না যে আপনি বুদ্ধিমান ব্রাউজারের সাথে কাজ করছেন; একইভাবে attachEventসম্পত্তি উপস্থিতি IE বোঝায় না । যদি আপনি চান যে আপনার কোডটি সত্যই এয়ার-টাইট হয়ে উঠতে পারে তবে আপনার এটি পরিবর্তন করার বিষয়টি বিবেচনা করা উচিত। পয়েন্টারগুলির জন্য টিম ডাউনের মন্তব্য দেখুন ।
addEventListenerজন্য সমর্থন করে না inputবা বিপরীতে); বৈশিষ্ট্য সনাক্তকরণ আরও ভাল হবে। এটির আলোচনার জন্য এই ব্লগ পোস্টটি দেখুন ।
oninputআমাদের কীভাবে এটি করা উচিত তা হল, তবে আপনার সম্ভবত addEventListenerব্রাউজার-সমর্থনের জন্য আপনার পরীক্ষা হিসাবে ব্যবহার করা উচিত নয় । যে কোনও ক্ষেত্রে +1।
keypress(এবং সম্ভবত পরবর্তী সংস্করণগুলিতেও) কেসটি পরিচালনা করতে ইভেন্টটি ব্যবহার করার পরামর্শ দেয় ।
inputইভেন্ট হ্যান্ডলারটি .oninputবস্তুর সম্পত্তি প্রয়োগ করে সংজ্ঞায়িতও করা যায় ।
ফায়ারফক্সে পরীক্ষা করা হয়নি।
var isIE = /*@cc_on!@*/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>আমি জানি এটি ঠিক আপনার প্রশ্ন নয় তবে আমি ভেবেছিলাম এটি কার্যকর হতে পারে। নির্দিষ্ট অ্যাপ্লিকেশনগুলির জন্য পরিবর্তন ফাংশনটি একবারে কী টিপানো হয় না এমন সময় ভাল হয়। এটি এই জাতীয় কিছু দিয়ে অর্জন করা যেতে পারে:
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);
}
}();এটি যদি কোনও সাম্প্রতিক ইভেন্টটি নির্দিষ্ট বিলম্বের সময়কালে চালিত হয় তবে এটি পরীক্ষার মাধ্যমে কাজ করে। শুভকামনা!
আমি জানি এই প্রশ্নটি জাভাস্ক্রিপ্টের সাথে সুনির্দিষ্ট ছিল, তবে, বর্তমানের সমস্ত ব্রাউজারে কোনও টেক্সারিয়া পরিবর্তিত হলে সর্বদা সনাক্ত করার কোনও ভাল, পরিষ্কার উপায় নেই বলে মনে হয়। আমি শিখেছি jquery আমাদের এটি যত্ন নিয়েছে। এমনকি পাঠ্য অঞ্চলে প্রাসঙ্গিক মেনু পরিবর্তনগুলি পরিচালনা করে। ইনপুট প্রকার নির্বিশেষে একই বাক্য গঠন ব্যবহার করা হয়।
$('div.lawyerList').on('change','textarea',function(){
// Change occurred so count chars...
});অথবা
$('textarea').on('change',function(){
// Change occurred so count chars...
});bind("input cut paste"...এবং এটি কমন এর মতো কাজ করে - কীবোর্ড বা প্রসঙ্গ মেনু ব্যবহার করে টাইপিং, কাট এবং পেস্ট করুন; এমনকি টেক্সট ড্র্যাগ / ড্রপ।
changeজন্য ইভেন্ট চালায় না 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>এইচটিএমএল 5 ইনপুট বৈধতা / প্যাটার্ন বৈশিষ্ট্যের সাথে জুটিবদ্ধ থাকলে কীপটি যথেষ্ট। সুতরাং, ইনপুটটিকে বৈধতা দেওয়ার জন্য একটি প্যাটার্ন (রেজেক্স) তৈরি করুন এবং .checkValidity () স্থিতি অনুসারে কাজ করুন। নীচের মতো কিছু কাজ করতে পারে। আপনার ক্ষেত্রে আপনি দৈর্ঘ্যের সাথে মিলে একটি রেজেক্স চাইবেন। আমার সমাধানটি এখানে অনলাইনে ব্যবহার / ডেমো-সক্ষম ।
<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;
}
});কোড আমি আইকিউ 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)' ...আর একবার চেষ্টা কর. এটি সহজ, এবং ২০১ 2016 সাল থেকে আমি নিশ্চিত এটি বেশিরভাগ ব্রাউজারে কাজ করবে।
<textarea id="text" cols="50" rows="5" onkeyup="check()" maxlength="15"></textarea>
<div><span id="spn"></span> characters left</div>
function check(){
var string = document.getElementById("url").value
var left = 15 - string.length;
document.getElementById("spn").innerHTML = left;
}আপনি যে কাজটি করতে পারেন তা হ'ল একটি ফাংশন নির্দিষ্ট সময়ের জন্য কল করা এবং এই ফাংশনটি আপনার পাঠ্য সামগ্রীর বিষয়বস্তুগুলি পরীক্ষা করা।
self.setInterval('checkTextAreaValue()', 50);