Ext.form.field.Number में इनपुट वर्णों को फ़िल्टर करें

मुझे लगता है कि क्लाइंट साइड पर जावास्क्रिप्ट के सक्रिय उपयोग के साथ WEB एप्लिकेशन लिखने वाले सभी को दशमलव विभाजक समस्या का सामना करना पड़ा। और इस समस्या का समाधान किसी भी तरह से तुच्छ नहीं है, क्योंकि यह पहली नज़र में लग सकता है। एक्सटीजेएस एक दृष्टिकोण का उपयोग करता है जो लागू करने और प्रबंधित करने के लिए सरल है: एक संख्यात्मक क्षेत्र एक चरित्र को इंगित करता है जिसे एक विभाजक माना जाता है, और अन्य वर्ण, संख्या और "-" को छोड़कर निषिद्ध हैं। हालाँकि, यह दृष्टिकोण, यह मुझे लगता है, एक महत्वपूर्ण दोष है: जब कई लेआउट का उपयोग किया जाता है, तो संख्यात्मक कीपैड पर दशमलव विभाजक विभिन्न वर्णों से मेल खाता है। इसे कैसे ठीक करें नीचे वर्णित है।

चलो शुरू करते हैं, या फ़िल्टरिंग मानक Ext.form.field.Number में कैसे काम करता है

दस्तावेज़ीकरण के अनुसार, घटक में अक्षमकफ़िल्टर गुण है, जो इनपुट वर्णों को फ़िल्टर करने और Ext.form.field.Text पाठ क्षेत्र से विरासत में प्राप्त करने के लिए जिम्मेदार है। पाठ क्षेत्र के स्रोत में उल्लिखित संपत्ति की तलाश करते हैं। कोड में इसका एकमात्र उल्लेख initEvents विधि में है, जहां फ़िल्टरकेयर हैंडलर कीप इवेंट पर लटका दिया गया है। अब हम पाठ से संख्या क्षेत्र तक की कक्षाओं के पदानुक्रम के माध्यम से "चलेंगे" और ओवरराइड किए गए फ़िल्टरकेय विधि की तलाश करेंगे, और कुछ भी खोजने के बिना, हम पाए गए को चुनेंगे। विधि के अंदर, सिद्धांत रूप में, कुछ विशेष नहीं है: फ़िल्टरिंग में नियमित अभिव्यक्ति के अनुपालन के लिए इनपुट चरित्र की जांच होती है, जिसे घटक को कॉन्फ़िगर करते समय निर्दिष्ट किया जा सकता है। अब संख्या क्षेत्र के प्रलेखन को देखें और देखें कि कॉन्फ़िगरेशन के दौरान मास्करी पैरामीटर सेट नहीं किया जा सकता है, अर्थात। आप इसे केवल इस रूप में सेट कर सकते हैं कि यह कैसे असंगत रूप से संसाधित किया जाता है। हम संख्या क्षेत्र के स्रोत और initComponent () विधि में चढ़ते हैं जो हम देखते हैं:

if (me.disableKeyFilter !== true) { allowed = me.baseChars + ''; if (me.allowDecimals) { allowed += me.decimalSeparator; } if (me.minValue < 0) { allowed += '-'; } allowed = Ext.String.escapeRegex(allowed); me.maskRe = new RegExp('[' + allowed + ']'); if (me.autoStripChars) { me.stripCharsRe = new RegExp('[^' + allowed + ']', 'gi'); } } 

दूसरे शब्दों में, यदि फ़िल्टरिंग जानबूझकर बंद नहीं की जाती है, तो घटक निर्दिष्ट सेटिंग्स के आधार पर अपने आप मास्क बनाता है। मानक संस्करण में, इनपुट वर्ण निम्नलिखित में से एक होना चाहिए '।-0123456789'। यहाँ, वास्तव में, संपूर्ण फ़िल्टर है।

प्लगइन खाली

कौन नहीं जानता कि प्लगइन्स कैसे लिखे जाते हैं, प्रलेखन पढ़ने के लिए जाता है। बाकी के लिए, नीचे दिए गए कोड में कुछ भी जटिल नहीं है।

 Ext.define('Ext.plugin.form.field.NumberInputFilter', { alias : 'plugin.numberinputfilter', extend : 'Ext.AbstractPlugin', init : function(field) { //   ,        if (!(field && field.isXType('numberfield'))) { return; } Ext.apply(field, { //    , //         Ext.form.field.Text filterKeys : function(e){ if (e.ctrlKey && !e.altKey) { return; } var key = e.getKey(), charCode = String.fromCharCode(e.getCharCode()); if(Ext.isGecko && (e.isNavKeyPress() || key === e.BACKSPACE || (key === e.DELETE && e.button === -1))){ return; } if(!Ext.isGecko && e.isSpecialKey() && !charCode){ return; } if(!this.maskRe.test(charCode)){ e.stopEvent(); } } }); } }); 

दशमलव विभाजक

इस तथ्य के कारण कि सबसे आम सीमांकक अवधि "हैं।" और अल्पविराम ",", इसलिए ये डिफ़ॉल्ट सीमांकक होंगे। चलो प्लगइन में अनुमत डीडिमलस्मैपर्स कॉन्फ़िगरेशन प्रॉपर्टी को जोड़ते हैं, एक कंस्ट्रक्टर जो इस प्रॉपर्टी के डिफ़ॉल्ट मान को सेट करता है यदि आवश्यक हो, साथ ही स्वयं फ़िल्टरकेय () विधि में प्रसंस्करण।

 Ext.define('Ext.plugin.form.field.NumberInputFilter', { alias : 'plugin.numberinputfilter', extend : 'Ext.AbstractPlugin', constructor : function(cfg) { cfg = cfg || {}; //     Ext.applyIf(cfg, { allowedDecimalSeparators : ',.' }); Ext.apply(this, cfg); }, init : function(field) { //   ,        if (!(field && field.isXType('numberfield'))) { return; } Ext.apply(field, { //     filterKeys : function(e){ if (e.ctrlKey && !e.altKey) { return; } var key = e.getKey(), charCode = String.fromCharCode(e.getCharCode()); if(Ext.isGecko && (e.isNavKeyPress() || key === e.BACKSPACE || (key === e.DELETE && e.button === -1))){ return; } if(!Ext.isGecko && e.isSpecialKey() && !charCode){ return; } // begin hack if (charCode != this.decimalSeparator && this.allowedDecimalSeparators.indexOf(charCode) != -1) { //      , //     , //      charCode = this.decimalSeparator; if (Ext.isIE) { //  IE       e.browserEvent.keyCode = charCode.charCodeAt(0); } else if (Ext.isGecko) { //  gecko-   e.stopEvent(); //         var newEvent = document.createEvent('KeyEvents'); //     , // ..    ,   //      newEvent.initKeyEvent( e.browserEvent.type, e.browserEvent.bubbles, true, //cancellable e.browserEvent.view, e.browserEvent.ctrlKey, e.browserEvent.altKey, e.browserEvent.shiftKey, e.browserEvent.metaKey, 0, // keyCode charCode.charCodeAt(0) // charCode ); e.getTarget().dispatchEvent(newEvent); //  ,     . return; } else if (Ext.isWebKit) { //   e.stopEvent(); //  webkit initKeyboardEvent  ,   TextEvent if (this.maskRe.test(charCode)) { var newEvent = document.createEvent('TextEvent'); newEvent.initTextEvent( 'textInput', e.browserEvent.bubbles, true, e.browserEvent.view, charCode ); e.getTarget().dispatchEvent(newEvent); } return; } } // end hack if(!this.maskRe.test(charCode)){ e.stopEvent(); } } }); } }); 

अब किसी भी समर्थित विभाजक को सही के साथ बदल दिया जाएगा। हालाँकि, जहाँ और जहाँ आप चाहें, परिसीमन दर्ज किया जा सकता है। इस गलतफहमी को ठीक करो।

इनपुट मूल्य के लिए छद्म मुखौटा समर्थन

छद्म मुखौटा समर्थन से, हमारा मतलब है कि एक अमान्य चरित्र, साथ ही साथ एक अमान्य स्थान में एक वैध चरित्र को पेश करने की असंभवता। उदाहरण के लिए, माइनस साइन "-" एक संख्या की शुरुआत में नहीं है, या एक स्ट्रिंग में कई दशमलव विभाजक हैं। जैसा कि ऊपर वर्णित है, चरित्र फ़िल्टरिंग एक नियमित अभिव्यक्ति के माध्यम से किया जाता है। हालांकि, इनपुट मास्क का समर्थन करने के लिए, कुछ और की आवश्यकता होती है, इसलिए हम फ़ील्ड में एक और चेकवैल्यू () विधि जोड़ देंगे, जो नवप्रवेशित चरित्र को एक तर्क के रूप में लेगा और छद्म मुखौटा के अनुपालन के लिए प्राप्त मूल्य की जांच करेगा।
संख्यात्मक मान के सशर्त रूप से स्ट्रिंग प्रतिनिधित्व को "विभाजक" और "बाद में" दशमलव विभाजक में विभाजित किया जा सकता है। तो हम जाँच करेंगे:

 checkValue : function(newChar) { //    input  var raw = this.getRawValue(); if (Ext.isEmpty(raw)) { //   ,    : // -   // -   "-",     // -   return (newChar == this.decimalSeparator || (this.minValue < 0) && newChar == '-') || /^\d$/.test(newChar); } //    ,... if (raw.length == this.maxLength) { // ...       return false; } if (newChar == this.decimalSeparator && (!this.allowDecimals || raw.indexOf(this.decimalSeparator) != -1)) { // ...   ,    , //        return false; } //    raw += newChar; raw = raw.split(new RegExp(Ext.String.escapeRegex(this.decimalSeparator))); return (!raw[0] || this.intRe.test(raw[0])) && (!raw[1] || this.decRe.test(raw[1])); } 

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

 //     decimalPrecision   //       updateDecimalPrecision : function(prec, force) { if (prec == this.decimalPrecision && force !== true) { return; } if (!Ext.isNumber(prec) || prec < 1) { //   ,     this.allowDecimals = false; } else { this.decimalPrecision = prec; } //      var intRe = '^'; if (this.minValue < 0) { intRe += '-?'; } // integerPrecision -  decimalPrecision   , //       intRe += '\\d' + (Ext.isNumber(this.integerPrecision) ? '{1,' + this.integerPrecision + '}' : '+') + '$'; this.intRe = new RegExp(intRe); if (this.allowDecimals) { //      this.decRe = new RegExp('^\\d{1,' + this.decimalPrecision + '}$'); } else { delete this.decRe; } } 

वर्णित विधि को प्लगइन के इनिट () विधि के अंत में क्षेत्र में बुलाया जाना चाहिए।
परिणामस्वरूप प्लग-इन काफी कार्यात्मक है, हालांकि, यह कुछ अप्रिय विशेषताओं के बिना नहीं है: उदाहरण के लिए, दर्ज किया गया मान, दशमलव का वह भाग जो इसे आवंटित अंकों को पूरी तरह से घेरता है, इसे हाइलाइट करके हटाया नहीं जा सकता। इस स्थिति से निपटने के लिए, हम फ़ील्ड में पाठ के चयनित भाग के प्रसंस्करण को जोड़कर CheckValue () कोड में थोड़ा सुधार करेंगे। नतीजतन, कोड इस तरह दिखेगा

 checkValue : function(newChar) { //    input  var raw = this.getRawValue(); //  dom- var el = this.inputEl.dom; //       var start = getSelectionStart(el); var end = getSelectionEnd(el); if (start != end) { //       raw = raw.substring(0, start) + raw.substring(end); } if (Ext.isEmpty(raw)) { //   ,    : // -   // -   "-",     // -   return (newChar == this.decimalSeparator || (this.minValue < 0) && newChar == '-') || /^\d$/.test(newChar); } //    ,... if (raw.length == this.maxLength) { // ...       return false; } if (newChar == this.decimalSeparator && (!this.allowDecimals || raw.indexOf(this.decimalSeparator) != -1)) { // ...   ,    , //        return false; } //    raw = raw.substring(0, start) + newChar + raw.substring(start); raw = raw.split(new RegExp(Ext.String.escapeRegex(this.decimalSeparator))); return (!raw[0] || this.intRe.test(raw[0])) && (!raw[1] || this.decRe.test(raw[1])); } 

वह सब है। बस के मामले में, मैं प्लगइन और एक डेमो का पूरा कोड देता हूं।

 Ext.define('Ext.plugin.form.field.NumberInputFilter', { alias: 'plugin.numberinputfilter', extend: 'Ext.AbstractPlugin', constructor : function(cfg) { cfg = cfg || {}; Ext.applyIf(cfg, { allowedDecimalSeparators : ',.' }); Ext.apply(this, cfg); }, init : function(field) { if (!(field && field.isXType('numberfield'))) { return; } Ext.apply(field, { allowedDecimalSeparators : this.allowedDecimalSeparators, checkValue : function(newChar) { var raw = this.getRawValue(); var el = this.inputEl.dom; //    http://javascript.nwbox.com/cursor_position/ //     cursor.js var start = getSelectionStart(el); var end = getSelectionEnd(el); if (start != end) { //       raw = raw.substring(0, start) + raw.substring(end); } if (Ext.isEmpty(raw)) { return (newChar == this.decimalSeparator || (this.minValue < 0) && newChar == '-') || /^\d$/.test(newChar); } if (raw.length == this.maxLength) { return false; } if (newChar == this.decimalSeparator && (!this.allowDecimals || raw.indexOf(this.decimalSeparator) != -1)) { return false; } //    raw = raw.substring(0, start) + newChar + raw.substring(start); raw = raw.split(new RegExp(Ext.String.escapeRegex(this.decimalSeparator))); return (!raw[0] || this.intRe.test(raw[0])) && (!raw[1] || this.decRe.test(raw[1])); }, filterKeys : function(e){ if (e.ctrlKey && !e.altKey) { return; } var key = e.getKey(), charCode = String.fromCharCode(e.getCharCode()); if(Ext.isGecko && (e.isNavKeyPress() || key === e.BACKSPACE || (key === e.DELETE && e.button === -1))){ return; } if(!Ext.isGecko && e.isSpecialKey() && !charCode){ return; } // begin hack if (charCode != this.decimalSeparator && this.allowedDecimalSeparators.indexOf(charCode) != -1) { //      , //     , //      charCode = this.decimalSeparator; if (Ext.isIE) { //  IE       e.browserEvent.keyCode = charCode.charCodeAt(0); } else if (Ext.isGecko) { //  gecko-   e.stopEvent(); //         var newEvent = document.createEvent('KeyEvents'); //     , // ..    ,   //      newEvent.initKeyEvent( e.browserEvent.type, e.browserEvent.bubbles, true, //cancellable e.browserEvent.view, e.browserEvent.ctrlKey, e.browserEvent.altKey, e.browserEvent.shiftKey, e.browserEvent.metaKey, 0, // keyCode charCode.charCodeAt(0) // charCode ); e.getTarget().dispatchEvent(newEvent); //  ,     . return; } else if (Ext.isWebKit) { //   e.stopEvent(); //  webkit initKeyboardEvent  ,   TextEvent if (this.checkValue(charCode)) { var newEvent = document.createEvent('TextEvent'); newEvent.initTextEvent( 'textInput', e.browserEvent.bubbles, true, e.browserEvent.view, charCode ); e.getTarget().dispatchEvent(newEvent); } return; } } if (!this.checkValue(charCode)) { e.stopEvent(); } // end hack }, updateDecimalPrecision : function(prec, force) { if (prec == this.decimalPrecision && force !== true) { return; } if (!Ext.isNumber(prec) || prec < 1) { this.allowDecimals = false; } else { this.decimalPrecision = prec; } var intRe = '^'; if (this.minValue < 0) { intRe += '-?'; } intRe += '\\d' + (Ext.isNumber(this.integerPrecision) ? '{1,' + this.integerPrecision + '}' : '+') + '$'; this.intRe = new RegExp(intRe); if (this.allowDecimals) { this.decRe = new RegExp('^\\d{1,' + this.decimalPrecision + '}$'); } else { delete this.decRe; } }, fixPrecision : function(value) { // support decimalSeparators if (Ext.isString(value)) { value = value.replace(new RegExp('[' + Ext.String.escapeRegex(this.allowedDecimalSeparators + this.decimalSeparator) + ']'), '.'); } // end hack var me = this, nan = isNaN(value), precision = me.decimalPrecision; if (nan || !value) { return nan ? '' : value; } else if (!me.allowDecimals || precision <= 0) { precision = 0; } return parseFloat(Ext.Number.toFixed(parseFloat(value), precision)); } }); field.updateDecimalPrecision(field.decimalPrecision, true); } }); Ext.onReady(function() { Ext.create('Ext.window.Window', { renderTo : Ext.getBody(), width : 300, height : 230, minWidth : 300, minHeight : 230, closable : false, bodyStyle : 'padding:5px', layout : 'border', title : 'NumberInputFilterPlugin - Demo', items : [{ region : 'north', xtype : 'fieldset', defaults : { xtype : 'numberfield', hideTrigger : true, msgTarget : 'side', autoFitErrors : true }, title : 'without plugin', items : [{ fieldLabel : 'simple' },{ fieldLabel : 'autoStripChars', autoStripChars : true }] },{ region : 'center', xtype : 'fieldset', title : 'with plugin', defaults : { xtype : 'numberfield', hideTrigger : true, msgTarget : 'side', autoFitErrors : true }, layout : 'anchor', items : [{ fieldLabel : 'non negative', minValue : 0, plugins : Ext.create('plugin.numberinputfilter') },{ fieldLabel : '"@,./#" as decimal separators', plugins : Ext.create('plugin.numberinputfilter', { allowedDecimalSeparators : '@,./#' }) }] }] }).show(); Ext.tip.QuickTipManager.init(); }); 

UPD: फ़ायरफ़ॉक्स में फ़िल्टरिंग का काम कैसे करें> 12. कार्यान्वयन यहाँ से लिया गया है , फ़ायरफ़ॉक्स के संस्करण का निर्धारण कैसे करें, मुझे लगता है कि किसी को भी इसे दिखाने की आवश्यकता नहीं है। यदि इसके साथ समस्याएं हैं, तो यहां देखें। तो, filterKeys से कोड का एक टुकड़ा:

 ... } else if (Ext.isGecko) { //  gecko-   e.stopEvent(); // https://bugzilla.mozilla.org/show_bug.cgi?id=749185 //  firefoxVersion  . if (firefoxVersion < 12) { //         var newEvent = document.createEvent('KeyEvents'); //     , // ..    ,   //      newEvent.initKeyEvent( e.browserEvent.type, e.browserEvent.bubbles, true, //cancellable e.browserEvent.view, e.browserEvent.ctrlKey, e.browserEvent.altKey, e.browserEvent.shiftKey, e.browserEvent.metaKey, 0, // keyCode charCode.charCodeAt(0) // charCode ); e.getTarget().dispatchEvent(newEvent); } else if (this.checkValue(charCode)) { // http://forums.mozillazine.org/viewtopic.php?p=12198605&sid=3723622be9117f663d16d522fe03deb5#p12198605 var tgt = e.getTarget(); if ('selectionStart' in tgt) { if (tgt.selectionStart == tgt.textLength) { tgt.value += charCode; } else { var lastpos = tgt.selectionStart; tgt.value = tgt.value.substr(0, lastpos) + charCode + tgt.value.substr(lastpos); tgt.selectionStart = lastpos + 1; tgt.selectionEnd = lastpos + 1; } } } return; } else if (Ext.isWebKit) { ...