Textarea विनिमय पहचान

Question

मैं जावास्क्रिप्ट का उपयोग कर textarea पर परिवर्तन घटना का पता कैसे लगा सकता हूं?
मैं यह पता लगाने की कोशिश कर रहा हूं कि आपके द्वारा टाइप किए जाने वाले कितने वर्ण उपलब्ध हैं।

मैंने एक्सचेंज इवेंट का उपयोग करने की कोशिश की, लेकिन ऐसा लगता है कि फोकस खत्म होने पर ही किक हो जाता है।

Answer 1

इसके लिए आपको onkeyupऔरonchange का उपयोग करने की आवश्यकता होगी। बदले में संदर्भ-मेनू पेस्टिंग को रोका जाएगा, और प्रत्येक कीस्ट्रोक के लिए ऑनकीप आग लग जाएगी।

कोड नमूना के लिए How to impose maxlength on textArea पर मेरा उत्तर देखें।

Answer 2

क्या आपने onkeyup देखा है?

http://www.w3schools.com/jsref/event_onkeyup.asp

Answer 3

यह अपने आप पर आसान बनाने और jquery.maxlength की तरह एक jQuery प्लगइन का उपयोग। http://www.anon-design.se/demo/maxlength-with-jquery पर ट्यूटोरियल।

Answer 4

सबसे अच्छी चीज जो आप कर सकते हैं वह है कि किसी फ़ंक्शन को आपके टेक्स्टरेरा की सामग्री को जांचने के लिए एक निश्चित समय पर कॉल किया जाए।

self.setInterval('checkTextAreaValue()', 50); 

Answer 5

मुझे पता है कि यह वास्तव में आपका प्रश्न नहीं है, लेकिन मैंने सोचा कि यह उपयोगी हो सकता है। कुछ अनुप्रयोगों के लिए यह बदलना अच्छा होता है कि प्रत्येक बार एक कुंजी दबाए जाने पर परिवर्तन फ़ंक्शन आग नहीं होती है। इसे इस तरह से प्राप्त किया जा सकता है:

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

यह जांच करके काम करता है कि एक और हालिया घटना किसी निश्चित देरी अवधि के भीतर निकाल दी गई है। सौभाग्य!

Answer 6

• Google क्रोम के लिए, ऑनपुट पर्याप्त होगा (संस्करण 22.0.122 9.9 4 मीटर के साथ विंडोज 7 पर परीक्षण किया गया)।
• आईई 9 के लिए, oninput संदर्भमेनू और बैकस्पेस के माध्यम से कट को छोड़कर सबकुछ पकड़ लेगा।
• आईई 8 के लिए, onprput के अलावा चिपकने के लिए onpropertychange की आवश्यकता है।
• आईई 9 + 8 के लिए, बैकस्पेस को पकड़ने के लिए ऑनकीप की आवश्यकता होती है।
• आईई 9 + 8 के लिए, onmousemove एक ही रास्ता मैं ContextMenu

फ़ायरफ़ॉक्स पर परीक्षण नहीं के माध्यम से काटने को पकड़ने के लिए मिला है।

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> 

Answer 7

यह 2012 है, पीसी के बाद के युग यहां है, और हमें अभी भी इस तरह के मूल के रूप में कुछ संघर्ष करना है। यह बहुत सरल होना चाहिए।तो की तरह, input और onpropertychange घटनाओं के संयोजन का उपयोग:

समय जैसे कि सपने को पूरा किया है, यहाँ यह, क्रॉस-ब्राउज़र करने के लिए सबसे अच्छा तरीका है जब तक

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+, FF, Chrome, Opera and Safari का ख्याल रखती है, और onpropertychangeIE8 का ख्याल रखती है (यह आईई 6 और 7 के साथ भी काम करती है, लेकिन कुछ बग हैं)।

input और onpropertychange उपयोग करने का लाभ यह है कि वे अनावश्यक रूप से आग नहीं है (जब Ctrl या Shift कुंजी का उपयोग) की तरह है, इसलिए यदि आप टेक्स्टरेरा सामग्री बदलते समय अपेक्षाकृत महंगे ऑपरेशन चलाने की इच्छा रखते हैं, तो यह पर जाने का तरीका है। IE में जब पात्रों पाठ क्षेत्र से हटा दिया हैं न input है और न ही onpropertychange आग:

अब आईई, हमेशा की तरह, इस का समर्थन करने का एक आधा assed काम करता है। इसलिए यदि आपको IE में वर्णों को हटाने की आवश्यकता है, तो keypress का उपयोग करें (keyup/keydown का उपयोग करने के विपरीत, क्योंकि वे केवल एक बार आग लगते हैं, भले ही उपयोगकर्ता दबाए और दबाए रखें)।

स्रोत: http://www.alistapart.com/articles/expanding-text-areas-made-elegant/

संपादित करें: ऐसा लगता है यहां तक ​​कि इसके बाद के संस्करण समाधान परिपूर्ण नहीं, के रूप में ठीक ही टिप्पणी में कहा है: पाठ क्षेत्र पर addEventListener संपत्ति की उपस्थिति करता नहीं मतलब आप कर रहे हैं एक सायन ब्राउज़र के साथ काम करना; इसी तरह attachEvent संपत्ति की उपस्थिति आईई का अर्थ नहीं है। यदि आप चाहते हैं कि आपका कोड वास्तव में हवादार हो, तो आपको इसे बदलने पर विचार करना चाहिए। पॉइंटर्स के लिए Tim Down's comment देखें।

Answer 8

मुझे पता है कि यह प्रश्न जावास्क्रिप्ट के लिए विशिष्ट था, हालांकि, सभी मौजूदा ब्राउज़रों में टेक्स्टरेरा बदलते समय हमेशा पता लगाने के लिए कोई अच्छा, साफ तरीका नहीं लगता है। मैंने सीखा है कि jquery ने हमारे लिए इसका ख्याल रखा है। यह टेक्स्ट क्षेत्रों में प्रासंगिक मेनू परिवर्तनों को भी संभालता है। इनपुट प्रकार के बावजूद एक ही वाक्यविन्यास का उपयोग किया जाता है।

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

या

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

Answer 9

कोड मैं jQuery के बिना और सिर्फ एक पाठ क्षेत्र के लिए IE 11 के लिए इस्तेमाल किया है:

जावास्क्रिप्ट:

// 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)' ... 

Answer 10

यदि एचटीएमएल 5 इनपुट सत्यापन/पैटर्न विशेषता के साथ जोड़ा गया तो कुंजीपटल पर्याप्त होना चाहिए। तो, इनपुट को सत्यापित करने और .checkValidity() स्थिति पर कार्य करने के लिए एक पैटर्न (regex) बनाएं। नीचे कुछ ऐसा काम कर सकता है। आपके मामले में आप एक रेगेक्स लंबाई से मिलान करना चाहते हैं। मेरा समाधान उपयोग/डेमो-सक्षम ऑनलाइन here में है।

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

Answer 11

इसे आजमाएं।यह आसान है, और 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; 
}