जवाबों:
आप उपयोग करने की आवश्यकता होगी onkeyup और onchange इस बात के लिए। ऑन्चेंज संदर्भ-मेनू चिपकाने को रोक देगा, और हर कीस्ट्रोकेक के लिए ऑनकीप फायर करेगा।
एक कोड नमूने के लिए textArea पर अधिकतम गति कैसे लागू करें पर मेरा जवाब देखें ।
onkeyupइनपुट का पता लगाने के लिए एक भयानक घटना है। का प्रयोग करें oninputऔर onpropertychange(IE समर्थन)।
onchangeजाता है।
यह 2012 का समय है, पीसी के बाद का युग यहां है, और हमें अभी भी इसके साथ बुनियादी रूप से कुछ संघर्ष करना है। यह बहुत आसान होना चाहिए ।
जब तक वह सपना पूरा नहीं हो जाता है, तब तक यह करने का सबसे अच्छा तरीका है, क्रॉस-ब्राउज़र: जैसे और घटनाओं के संयोजन का उपयोग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कुंजी दबाते समय ); इसलिए यदि आप टेक्स्टारिया सामग्री को बदलते समय अपेक्षाकृत महंगा ऑपरेशन चलाना चाहते हैं, तो यह रास्ता तय करना है ।
अब IE, हमेशा की तरह, इस का समर्थन करने का एक आधा काम करता है: न तो IE में आग inputऔर न ही onpropertychangeजब अक्षर textarea से हटा दिए जाते हैं । इसलिए यदि आपको IE में वर्णों को हटाने की आवश्यकता है, तो उपयोग करें keypress(जैसा कि उपयोग करने के विपरीत keyup/ keydown, क्योंकि वे केवल एक बार आग लगाते हैं भले ही उपयोगकर्ता दबाए और एक कुंजी दबाए रखता है)।
स्रोत: http://www.alistapart.com/articles/expanding-text-areas-made-elegant/
संपादित करें: ऐसा लगता है कि उपरोक्त समाधान भी सही नहीं है, जैसा कि टिप्पणियों में ठीक से बताया गया है: addEventListenerटेक्स्टारिया पर संपत्ति की उपस्थिति का मतलब यह नहीं है कि आप एक सेंस ब्राउज़र के साथ काम कर रहे हैं; इसी तरह attachEventसंपत्ति की उपस्थिति IE का अर्थ नहीं है। यदि आप चाहते हैं कि आपका कोड वास्तव में एयर-टाइट हो, तो आपको इसे बदलने पर विचार करना चाहिए। पॉइंटर्स के लिए टिम डाउन की टिप्पणी देखें ।
addEventListenerलिए समर्थन नहीं करता है input, या इसके विपरीत); सुविधा का पता लगाना बेहतर होगा। इस चर्चा के लिए इस ब्लॉग पोस्ट को देखें ।
oninputयह है कि हमें ऐसा कैसे करना चाहिए, लेकिन आपका संभवतः addEventListenerब्राउज़र-समर्थन के लिए आपके परीक्षण के रूप में उपयोग नहीं किया जाना चाहिए । किसी भी मामले में +1।
keypressIE9 में उस मामले को संभालने के लिए घटना का उपयोग करने का सुझाव देता है (और संभवतः बाद के संस्करण भी)।
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);
}
}();यह परीक्षण करके काम करता है यदि हाल ही में एक निश्चित घटना को एक निश्चित विलंब अवधि के भीतर निकाल दिया गया हो। सौभाग्य!
मुझे पता है कि यह सवाल जावास्क्रिप्ट के लिए विशिष्ट था, हालांकि, ऐसा प्रतीत होता है कि कोई भी अच्छा, साफ रास्ता नहीं है, जब सभी मौजूदा ब्राउज़रों में एक textarea बदल जाता है। मैंने सीखा है कि 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;
}
});कोड I का उपयोग IE 11 के लिए बिना jquery के लिए और सिर्फ एक टेक्स्टारिया के लिए किया गया है:
जावास्क्रिप्ट:
// 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);
}और HTML:
<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);