मास्क

Question

के साथ इनपुट को कैसे कार्यान्वित करें मैं एक टेक्स्ट इनपुट फ़ील्ड के लिए एक मुखौटा लागू करना चाहता हूं जो एक तिथि स्वीकार करता है। मास्क किए गए मान सीधे इनपुट के अंदर प्रदर्शित होना चाहिए।

कुछ इस तरह:

<input type='text' value='____/__/__'> 

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

मैंने इस व्यवहार को अन्य साइटों पर देखा है, लेकिन मुझे नहीं पता कि यह कैसे काम करता है या इसे कैसे कार्यान्वित किया जाए।

Answer 1

इनपुट मास्क keyup घटना के संयोजन का उपयोग लागू किया जा सकता है, और HTMLInputElementvalue, selectionStart, और selectionEnd गुण। यहां एक बहुत ही सरल कार्यान्वयन है जो आप चाहते हैं कि कुछ करता है। यह निश्चित रूप से सही नहीं है, लेकिन काफी अच्छी तरह से सिद्धांत प्रदर्शित करने के लिए काम करता है:

Array.prototype.forEach.call(document.body.querySelectorAll("*[data-mask]"), applyDataMask); 
 

 
function applyDataMask(field) { 
 
    var mask = field.dataset.mask.split(''); 
 
    
 
    // For now, this just strips everything that's not a number 
 
    function stripMask(maskedData) { 
 
     function isDigit(char) { 
 
      return /\d/.test(char); 
 
     } 
 
     return maskedData.split('').filter(isDigit); 
 
    } 
 
    
 
    // Replace `_` characters with characters from `data` 
 
    function applyMask(data) { 
 
     return mask.map(function(char) { 
 
      if (char != '_') return char; 
 
      if (data.length == 0) return char; 
 
      return data.shift(); 
 
     }).join('') 
 
    } 
 
    
 
    function reapplyMask(data) { 
 
     return applyMask(stripMask(data)); 
 
    } 
 
    
 
    function changed() { 
 
     var oldStart = field.selectionStart; 
 
     var oldEnd = field.selectionEnd; 
 
     
 
     field.value = reapplyMask(field.value); 
 
     
 
     field.selectionStart = oldStart; 
 
     field.selectionEnd = oldEnd; 
 
    } 
 
    
 
    field.addEventListener('click', changed) 
 
    field.addEventListener('keyup', changed) 
 
}

ISO Date: <input type="text" value="____-__-__" data-mask="____-__-__"/><br/> 
 
Telephone: <input type="text" value="(___) ___-____" data-mask="(___) ___-____"/><br/>

(View in JSFiddle)

भी वहाँ बाहर पुस्तकालयों जो इस समारोह में प्रदर्शन के एक नंबर रहे हैं। कुछ उदाहरणों में शामिल:

• jquery.inputmask
• MASKED INPUT PLUGIN
• Politespace

Answer 2

(इनपुट मास्क के लिए एक विकल्प प्रस्तुत करता है) सभी पोस्ट पढ़ने के बाद, मैं अपने खुद के कार्यान्वयन, मैं किसी से मदद करने के लिए आशा है कि था :

विचार है,

1. केवल प्रवेश संख्या की अनुमति दें। (कुंजी दबाने घटना)
2. एक सरणी
3. में सभी नंबरों को मिल एक पाश

सुधार स्वागत कर रहे हैं में सरणी से एक संख्या से हर "_" नकाब के चरित्र की जगह।

/** 
 
* charCode [48,57] \t Numbers 0 to 9 
 
* keyCode 46 \t \t \t "delete" 
 
* keyCode 9 \t \t \t "tab" 
 
* keyCode 13 \t \t \t "enter" 
 
* keyCode 116 \t \t \t "F5" 
 
* keyCode 8 \t \t \t "backscape" 
 
* keyCode 37,38,39,40 \t Arrows 
 
* keyCode 10 \t \t \t (LF) 
 
*/ 
 
function validate_int(myEvento) { 
 
    if ((myEvento.charCode >= 48 && myEvento.charCode <= 57) || myEvento.keyCode == 9 || myEvento.keyCode == 10 || myEvento.keyCode == 13 || myEvento.keyCode == 8 || myEvento.keyCode == 116 || myEvento.keyCode == 46 || (myEvento.keyCode <= 40 && myEvento.keyCode >= 37)) { 
 
    dato = true; 
 
    } else { 
 
    dato = false; 
 
    } 
 
    return dato; 
 
} 
 

 
function phone_number_mask() { 
 
    var myMask = "(___) ___-____"; 
 
    var myCaja = document.getElementById("phone"); 
 
    var myText = ""; 
 
    var myNumbers = []; 
 
    var myOutPut = "" 
 
    var theLastPos = 1; 
 
    myText = myCaja.value; 
 
    //get numbers 
 
    for (var i = 0; i < myText.length; i++) { 
 
    if (!isNaN(myText.charAt(i)) && myText.charAt(i) != " ") { 
 
     myNumbers.push(myText.charAt(i)); 
 
    } 
 
    } 
 
    //write over mask 
 
    for (var j = 0; j < myMask.length; j++) { 
 
    if (myMask.charAt(j) == "_") { //replace "_" by a number 
 
     if (myNumbers.length == 0) 
 
     myOutPut = myOutPut + myMask.charAt(j); 
 
     else { 
 
     myOutPut = myOutPut + myNumbers.shift(); 
 
     theLastPos = j + 1; //set caret position 
 
     } 
 
    } else { 
 
     myOutPut = myOutPut + myMask.charAt(j); 
 
    } 
 
    } 
 
    document.getElementById("phone").value = myOutPut; 
 
    document.getElementById("phone").setSelectionRange(theLastPos, theLastPos); 
 
} 
 

 
document.getElementById("phone").onkeypress = validate_int; 
 
document.getElementById("phone").onkeyup = phone_number_mask;

<input type="text" name="phone" id="phone" placeholder="(123) 456-7890" required="required" title="e.g (123) 456-7890" pattern="^\([0-9]{3}\)\s[0-9]{3}-[0-9]{4}$">

Answer 3

आप यह भी JavaScripts की मूल विधि का उपयोग कर प्राप्त कर सकते हैं। यह बहुत आसान है और आयात करने के लिए किसी भी अतिरिक्त पुस्तकालय की आवश्यकता नहीं है।इस कोड को

<input type="text" name="date" placeholder="yyyy-mm-dd" onkeyup=" 
    var date = this.value; 
    if (date.match(/^\d{4}$/) !== null) { 
    this.value = date + '-'; 
    } else if (date.match(/^\d{4}\-\d{2}$/) !== null) { 
    this.value = date + '-'; 
    }" maxlength="10"> 

Answer 4

का उपयोग करें: -: DEMO

आप का अध्ययन करके मूल बातें समझ सकते हैं

<input type="text" placeholder="" data-mask="9999/99/99"> 

Answer 5

यहाँ 500 लाइनों jQuery प्लगइन प्रपत्र फ़ील्ड्स और html तत्वों पर मास्क बनाने के लिए है इसका स्रोत कोड: https://github.com/igorescobar/jQuery-Mask-Plugin

Answer 6

आप मेरे कार्यान्वयन को भी आजमा सकते हैं, जिसमें प्रत्येक कुंजी प्रेस के बाद देरी नहीं होती है सामग्री टाइप करना, और बैकस्पेस और हटाने के लिए पूर्ण समर्थन है।

आप इसे ऑनलाइन की कोशिश कर सकते हैं: https://jsfiddle.net/qmyo6a1h/1/

<html> 
    <style> 
    input{ 
     font-family:'monospace'; 
    } 
    </style> 
    <body> 
     <input type="text" id="phone" placeholder="123-5678-1234" title="123-5678-1234" input-mask="___-____-____"> 
     <input type="button" onClick="showValue_phone()" value="Show Value" /> 
     <input type="text" id="console_phone" /> 
     <script> 
     function InputMask(element) { 
      var self = this; 

      self.element = element; 

      self.mask = element.attributes["input-mask"].nodeValue; 

      self.inputBuffer = ""; 

      self.cursorPosition = 0; 

      self.bufferCursorPosition = 0; 

      self.dataLength = getDataLength(); 

      function getDataLength() { 
      var ret = 0; 

      for (var i = 0; i < self.mask.length; i++) { 
       if (self.mask.charAt(i) == "_") { 
       ret++; 
       } 
      } 

      return ret; 
      } 

      self.keyEventHandler = function (obj) { 
      obj.preventDefault(); 

      self.updateBuffer(obj); 
      self.manageCursor(obj); 
      self.render(); 
      self.moveCursor(); 
      } 

      self.updateBufferPosition = function() { 
      var selectionStart = self.element.selectionStart; 
      self.bufferCursorPosition = self.displayPosToBufferPos(selectionStart); 
      console.log("self.bufferCursorPosition==" + self.bufferCursorPosition); 
      } 

      self.onClick = function() { 
      self.updateBufferPosition(); 
      } 

      self.updateBuffer = function (obj) { 
      if (obj.keyCode == 8) { 
       self.inputBuffer = self.inputBuffer.substring(0, self.bufferCursorPosition - 1) + self.inputBuffer.substring(self.bufferCursorPosition); 
      } 
      else if (obj.keyCode == 46) { 
       self.inputBuffer = self.inputBuffer.substring(0, self.bufferCursorPosition) + self.inputBuffer.substring(self.bufferCursorPosition + 1); 
      } 
      else if (obj.keyCode >= 37 && obj.keyCode <= 40) { 
       //do nothing on cursor keys. 
      } 
      else { 
       var selectionStart = self.element.selectionStart; 
       var bufferCursorPosition = self.displayPosToBufferPos(selectionStart); 
       self.inputBuffer = self.inputBuffer.substring(0, bufferCursorPosition) + String.fromCharCode(obj.which) + self.inputBuffer.substring(bufferCursorPosition); 
       if (self.inputBuffer.length > self.dataLength) { 
       self.inputBuffer = self.inputBuffer.substring(0, self.dataLength); 
       } 
      } 
      } 

      self.manageCursor = function (obj) { 
      console.log(obj.keyCode); 
      if (obj.keyCode == 8) { 
       self.bufferCursorPosition--; 
      } 
      else if (obj.keyCode == 46) { 
       //do nothing on delete key. 
      } 
      else if (obj.keyCode >= 37 && obj.keyCode <= 40) { 
       if (obj.keyCode == 37) { 
       self.bufferCursorPosition--; 
       } 
       else if (obj.keyCode == 39) { 
       self.bufferCursorPosition++; 
       } 
      } 
      else { 
       var bufferCursorPosition = self.displayPosToBufferPos(self.element.selectionStart); 
       self.bufferCursorPosition = bufferCursorPosition + 1; 
      } 
      } 

      self.setCursorByBuffer = function (bufferCursorPosition) { 
      var displayCursorPos = self.bufferPosToDisplayPos(bufferCursorPosition); 
      self.element.setSelectionRange(displayCursorPos, displayCursorPos); 
      } 

      self.moveCursor = function() { 
      self.setCursorByBuffer(self.bufferCursorPosition); 
      } 

      self.render = function() { 
      var bufferCopy = self.inputBuffer; 
      var ret = { 
       muskifiedValue: "" 
      }; 

      var lastChar = 0; 

      for (var i = 0; i < self.mask.length; i++) { 
       if (self.mask.charAt(i) == "_" && 
       bufferCopy) { 
       ret.muskifiedValue += bufferCopy.charAt(0); 
       bufferCopy = bufferCopy.substr(1); 
       lastChar = i; 
       } 
       else { 
       ret.muskifiedValue += self.mask.charAt(i); 
       } 
      } 

      self.element.value = ret.muskifiedValue; 

      } 

      self.preceedingMaskCharCount = function (displayCursorPos) { 
      var lastCharIndex = 0; 
      var ret = 0; 

      for (var i = 0; i < self.element.value.length; i++) { 
       if (self.element.value.charAt(i) == "_" 
       || i > displayCursorPos - 1) { 
       lastCharIndex = i; 
       break; 
       } 
      } 

      if (self.mask.charAt(lastCharIndex - 1) != "_") { 
       var i = lastCharIndex - 1; 
       while (self.mask.charAt(i) != "_") { 
       i--; 
       if (i < 0) break; 
       ret++; 
       } 
      } 

      return ret; 
      } 

      self.leadingMaskCharCount = function (displayIndex) { 
      var ret = 0; 

      for (var i = displayIndex; i >= 0; i--) { 
       if (i >= self.mask.length) { 
       continue; 
       } 
       if (self.mask.charAt(i) != "_") { 
       ret++; 
       } 
      } 

      return ret; 
      } 

      self.bufferPosToDisplayPos = function (bufferIndex) { 
      var offset = 0; 
      var indexInBuffer = 0; 

      for (var i = 0; i < self.mask.length; i++) { 
       if (indexInBuffer > bufferIndex) { 
       break; 
       } 

       if (self.mask.charAt(i) != "_") { 
       offset++; 
       continue; 
       } 

       indexInBuffer++; 
      } 
      var ret = bufferIndex + offset; 

      return ret; 
      } 

      self.displayPosToBufferPos = function (displayIndex) { 
      var offset = 0; 
      var indexInBuffer = 0; 

      for (var i = 0; i < self.mask.length && i <= displayIndex; i++) { 
       if (indexInBuffer >= self.inputBuffer.length) { 
       break; 
       } 

       if (self.mask.charAt(i) != "_") { 
       offset++; 
       continue; 
       } 

       indexInBuffer++; 
      } 

      return displayIndex - offset; 
      } 

      self.getValue = function() { 
      return this.inputBuffer; 
      } 
      self.element.onkeypress = self.keyEventHandler; 
      self.element.onclick = self.onClick; 
     } 

     function InputMaskManager() { 
      var self = this; 

      self.instances = {}; 

      self.add = function (id) { 
      var elem = document.getElementById(id); 
      var maskInstance = new InputMask(elem); 
      self.instances[id] = maskInstance; 
      } 

      self.getValue = function (id) { 
      return self.instances[id].getValue(); 
      } 

      document.onkeydown = function (obj) { 
      if (obj.target.attributes["input-mask"]) { 
       if (obj.keyCode == 8 || 
       obj.keyCode == 46 || 
       (obj.keyCode >= 37 && obj.keyCode <= 40)) { 

       if (obj.keyCode == 8 || obj.keyCode == 46) { 
        obj.preventDefault(); 
       } 

       //needs to broadcast to all instances here: 
       var keys = Object.keys(self.instances); 
       for (var i = 0; i < keys.length; i++) { 
        if (self.instances[keys[i]].element.id == obj.target.id) { 
        self.instances[keys[i]].keyEventHandler(obj); 
        } 
       } 
       } 
      } 
      } 
     } 

     //Initialize an instance of InputMaskManager and 
     //add masker instances by passing in the DOM ids 
     //of each HTML counterpart. 
     var maskMgr = new InputMaskManager(); 
     maskMgr.add("phone"); 

     function showValue_phone() { 
      //-------------------------------------------------------__Value_Here_____ 
      document.getElementById("console_phone").value = maskMgr.getValue("phone"); 
     } 
     </script> 
    </body> 

    </html> 

Answer 7

Array.prototype.forEach.call(document.body.querySelectorAll("*[data-mask]"), applyDataMask); 

function applyDataMask(field) { 
    var mask = field.dataset.mask.split(''); 

    // For now, this just strips everything that's not a number 
    function stripMask(maskedData) { 
     function isDigit(char) { 
      return /\d/.test(char); 
     } 
     return maskedData.split('').filter(isDigit); 
    } 

    // Replace `_` characters with characters from `data` 
    function applyMask(data) { 
     return mask.map(function(char) { 
      if (char != '_') return char; 
      if (data.length == 0) return char; 
      return data.shift(); 
     }).join('') 
    } 

    function reapplyMask(data) { 
     return applyMask(stripMask(data)); 
    } 

    function changed() { 
     var oldStart = field.selectionStart; 
     var oldEnd = field.selectionEnd; 

     field.value = reapplyMask(field.value); 

     field.selectionStart = oldStart; 
     field.selectionEnd = oldEnd; 
    } 

    field.addEventListener('click', changed) 
    field.addEventListener('keyup', changed) 
} 

Date: <input type="text" value="__-__-____" data-mask="__-__-____"/><br/> 
Telephone: <input type="text" value="(___) ___-____" data-mask="(___) ___-____"/><br/>