जावास्क्रिप्ट: कीडाउन घटना में इनपुट सत्यापन

Question

मैं keydown ईवेंट की प्रक्रिया में उपयोगकर्ता टेक्स्ट इनपुट के विरुद्ध जानकारी सत्यापन करने का प्रयास कर रहा हूं। कारण है कि मैं keydown ईवेंट में मान्य करने का प्रयास कर रहा हूं क्योंकि मैं उन पात्रों को प्रदर्शित नहीं करना चाहता हूं जिन्हें शुरुआत में input बॉक्स में अवैध माना जाता है।

सत्यापन मैं लिख रहा हूँ इस तरह है,

function validateUserInput(){ 
    var code = this.event.keyCode; 
    if ((code<48||code>57) // numerical 
     &&code!==46 //delete 
     &&code!==8 //back space 
     &&code!==37 // <- arrow 
     &&code!==39) // -> arrow 
    { 
    this.event.preventDefault();   
    } 
} 

मैं हालांकि मैं इस कार्यान्वयन पर कमियां देख रहा हूँ, इस तरह जा रहा रख सकते हैं। वे हैं, उदाहरण के लिए:

1. सशर्त बयान लंबे समय तक और लंबा हो गया जब मैंने जांच की और शर्तों को रखा।
2. keyCodes ब्राउज़र द्वारा अलग-अलग हो सकते हैं।
3. मुझे केवल यह जांचना नहीं है कि कानूनी क्या है लेकिन यह भी जांचना है कि असाधारण क्या है। उपर्युक्त उदाहरणों में, , बैकस्पेस, और तीर कुंजी असाधारण हैं।

लेकिन जिस सुविधा को मैं खोना नहीं चाहता हूं वह textarea में इनपुट प्रदर्शित नहीं कर रहा है जब तक कि यह सत्यापन पास न हो जाए। (यदि उपयोगकर्ता textarea में अवैध वर्ण डालने का प्रयास करता है, तो कुछ भी दिखाई नहीं देना चाहिए) यही कारण है कि मैं keyup ईवेंट पर सत्यापन नहीं कर रहा हूं।

तो मेरे सवाल है:

1. keyCodekeyCode द्वारा जाँच की तुलना में keydown स्थिति में इनपुट को मान्य करने के बेहतर तरीके हैं?
2. ब्राउज़र प्रदर्शित करने से पहले keydown ईवेंट के अलावा उपयोगकर्ता इनपुट को कैप्चर करने के अन्य तरीके हैं? और उस पर सत्यापन लगाने का एक तरीका?

अग्रिम सहायता के लिए धन्यवाद।

Answer 1

आप एक मुद्रण योग्य कुंजी है, जो वास्तव में क्या है की जाँच कर रहे हैं ऐसा लगता है कि आप ऐसा कर रहे हैं, आपको keypress ईवेंट का उपयोग करना चाहिए, क्योंकि यह एकमात्र ऐसा स्थान है जहां आप कुंजीपटल का प्रतिनिधित्व करने वाले चरित्र के बारे में विश्वसनीय जानकारी प्राप्त करने में सक्षम होंगे। आप keydown ईवेंट में विश्वसनीय संख्यात्मक संख्याओं का पता नहीं लगा सकते हैं। साथ ही, तीर कुंजियों को दबाएं और हटाएं/बैकस्पेस कुंजी को खराब करना एक बुरा विचार है। ऐसा करने से आपको क्या फायदा होता है?

भी कुछ त्रुटियाँ नहीं है: Firefox में, आप पैरामीटर ईवेंट हैंडलर समारोह में पारित से Event वस्तु पाने के लिए की आवश्यकता होगी, और आप addEventListener() या attachEvent() की तुलना में एक dom0 ईवेंट हैंडलर समारोह उपयोग कर रहे हैं बल्कि, आपको चाहिए डिफ़ॉल्ट व्यवहार को दबाने के लिए return false; का उपयोग करें। यहां मेरा अनुशंसित कोड है:

var input = document.getElementById("your_input_id"); 

input.onkeypress = function(evt) { 
    evt = evt || window.event; 
    var charCode = evt.which || evt.keyCode; 
    var charStr = String.fromCharCode(charCode); 
    if (/\d/.test(charStr)) { 
     return false; 
    } 
}; 

Answer 2

मुझे नहीं लगता कि आपको रोकथाम के भाग की आवश्यकता है। यदि आप चाबियाँ पकड़ना चाहते हैं (event.keyCode द्वारा, या event.ctrlKey + event.keyCode उदाहरण के लिए संयोजन का उपयोग करके), आप जांचते हैं कि keyCode की अनुमति है या नहीं। यदि ऐसा है, तो बस true लौटाएं, अन्यथा false लौटाएं। यदि आप false वापस करते हैं, तो इनपुट इनपुट इनपुट फ़ील्ड में नहीं लिखा जाएगा, अन्यथा यह होगा।

मैं कुंजीकोड का उपयोग करने के बेहतर तरीकों के बारे में नहीं सोच सकता। यदि आप विशिष्ट वर्ण मानों की जांच करना चाहते हैं, तो आप String.fromCharCode([keyCode]) का उपयोग कर सकते हैं, लेकिन यह उन कुंजीकोडों को जांचने के लिए कुछ लूप तक उबलता रहता है जिन्हें आप सत्यापित करना चाहते हैं। switch ... case एक और अधिक पठनीयता प्रदान कर सकता है।

यहाँ एक keydown ईवेंट हैंडलर मैं उपयोग से कोड का एक टुकड़ा है (बस प्रदर्शन के लिए, यह वास्तव में कुछ भी नहीं है):

function handleKey(e, thisFld) { 
     thisFld = (thisFld || this); 
       e = e || event; 
    if (!e) { 
     return true; 
    } 

    var isCtrl = e.ctrlKey, 
     isShift = e.shiftKey, 
     isAlt = e.altKey, 
     kc = e.keyCode || e.which, 
     codes = [27, 38, 40], 
     keys = { 
       escape: 27, 
       up: 38, 
       down: 40, 
       ins: 45, 
       del: 46, 
       one: 49 
       }; 

    if (isCtrl && kc === keys.del) { ... } 
    if (isAlt && kc === keys.ins) { ... } 
     //etc 
    return true; 
} 

Answer 3

यहां एक पहेली है जिसे आप खेल सकते हैं और अधिक अंतर्दृष्टि प्रदान कर सकते हैं।

jsfiddle: keydown/keypress demo w/ info display

ऐसा लगता है कि नवीनतम ब्राउज़र preventDefault का उपयोग()। नीचे दिए गए कोड मैं क्या jsfiddle पर डाल के समान है लेकिन स्टैंडअलोन है और है कि आप परीक्षण करने के लिए स्थानीय स्तर पर उपयोग कर सकते हैं एक HTML फ़ाइल में चिपकाया जा सकता है (ध्यान दें यह डिवाइस के परीक्षण के लिए मोबाइल के अनुकूल है।

<html> 
<head> 
<meta name="viewport" content="initial-scale=1, minimum-scale=1, maximum-scale=1, width=device-width, user-scalable=no"/> 
<style> 
.b {color:blue;} 
.r {color:red;} 
input {font-size:18px;} 
</style> 
<script> 
function byId(el) {return document.getElementById(el)} 
function sfcc (n) {return String.fromCharCode(n);} 
function foo(event) { 
    var he='&#x'+event.keyIdentifier.split('+')[1]+';'; 
    var html='' 
    var cn=event.target.className; 
    html+='kc: [<span class="b">'+sfcc(event.keyCode)+'</span>] '; 
    html+='wh: [<span class="b">'+sfcc(event.which)+'</span>] '; 
    html+='he: [<span class="b">'+he+'</span>]<br>'; 
    for (i in event) 
     if (["string","boolean","number"].indexOf(typeof event[i]) >-1 && i.toUpperCase()!=i) 
      html+='<span>'+i + '</span>: [<span class="r">'+event[i]+'</span>]<br>'; 
    byId('kc').innerHTML=html; 
    switch (cn) { 
     case "pd": event.preventDefault(); return; 
     case "rf": return false; 
    } 
} 
</script> 
</head> 
<body> 
kp/pd: <input class="pd" type="text" onkeypress="foo(event)"/><br> 
kp/rf: <input class="rf" type="text" onkeypress="foo(event)"/><br> 
kd/pd: <input class="pd" type="text" onkeydown="foo(event)"/><br> 
kd/rf: <input class="rf" type="text" onkeydown="foo(event)"/><br> 
<div id="kc"></div> 
</body> 
</html> 

Answer 4

तो, मैंने पाया गया कि कुंजी दबाने सब आराम के लिए मुद्रण योग्य पात्रों के लिए महान है, और keydown है। आप प्रिंट करने योग्य पात्रों के लिए keypress पर event.charCode जांच कर सकते हैं (यह प्रिंट न हो सकने के लिए 0 होना चाहिए)। आप तीर और इस तरह के लिए keydown पर event.keyCode उपयोग कर सकते हैं।

इस प्रकार मुझे क्रोम और फ़ायरफ़ॉक्स में काम करने के लिए एक स्वतः पूर्ण मिला।