मुख्य सामग्री पर जाएँ
CrossFly 100% ओपन सोर्सGitHub पर फ़ॉलो करें
CrossFlyCrossFly
शुरू करें

यह पृष्ठ पुर्तगाली से मशीन-अनुवादित है और इसमें त्रुटियाँ हो सकती हैं। पुर्तगाली संस्करण प्रामाणिक है।

CPF, CEP या तिथि पर मास्क कैसे लागू करें

उद्देश्य. टाइपिंग को विभाजकों (बिंदु, डैश, स्लैश) के साथ स्वचालित रूप से फ़ॉर्मैट करना ताकि उपयोगकर्ता केवल अंक टाइप करते समय 123.456.789-00 दिखे, और बाद में साफ़ मान (12345678900) प्राप्त किया जा सके।

उपयोग की गई APIs

  • campo.<TextFieldStyle>getStyle().mask("999.999.999-99".toCharArray()) — मास्क का पैटर्न परिभाषित करता है। 9 = अंक की स्थिति; कोई भी अन्य वर्ण एक लिटरल है जो स्वचालित रूप से डाला जाता है (., -, /)।
  • .mode(EditMode.NUMERIC, true) — न्यूमेरिक मोड और maskedEdit (दूसरा पैरामीटर true) दोनों को चालू करता है। maskedEdit के बिना मास्क लागू नहीं होता। क्रम मायने रखता है: mask(...) और mode(...) को एक साथ कॉल करें।
  • TextField.getText() — मास्क सहित टेक्स्ट लौटाता है ("123.456.789-00"), फ़ॉर्मैटेड रूप में प्रदर्शित/सहेजने के लिए आदर्श।
  • TextField.getTextWithoutMask() — केवल 9 स्थितियों के अंक लौटाता है ("12345678900"), बैकएंड को सत्यापित करने और भेजने के लिए आदर्श।

तिथियों के लिए, setMode(EditMode.DATE, true) को प्राथमिकता दें: यह locale से स्वचालित रूप से मास्क निकालता है (LocaleFormats.dateSeparator और LocaleFormats.dateFormat, उदा.: dd/MM/yyyy या yyyy-MM-dd) और DatePicker भी खोलता है। रेसिपी तिथि और समय देखें।

mode(EditMode.NUMERIC, true) में क्रम पर ध्यान दें: NUMERIC/NORMAL मोड मास्क से maxLength की पुनर्गणना केवल तभी करता है जब मास्क पहले से परिभाषित हो। mask(...) को पहले या उसी फ़्लुएंट चेन में परिभाषित करें।

पूर्ण उदाहरण (कॉपी करें, पेस्ट करें और चलाएँ)

package com.exemplo;

import dev.crossfly.ui.*;
import dev.crossfly.ui.layout.*;
import dev.crossfly.ui.style.*;   // TextFieldStyle (style में config)

/** चलाने योग्य मुख्य स्क्रीन। launcher (classname) की ओर संकेत करें और चलाएँ: gradlew :lwjgl3:run */
public class MainWindow extends Window
{
   @Override
   public void onShow() throws Exception
   {
      super.onShow();
      setLayout(new VerticalLayout());

      // CPF: 123.456.789-00
      TextField cpf = new TextField("");
      cpf.caption("CPF");
      cpf.<TextFieldStyle>getStyle()
         .mask("999.999.999-99".toCharArray())
         .mode(EditMode.NUMERIC, true);   // NUMERIC + maskedEdit

      // CEP: 12345-678
      TextField cep = new TextField("");
      cep.caption("CEP");
      cep.<TextFieldStyle>getStyle()
         .mask("99999-999".toCharArray())
         .mode(EditMode.NUMERIC, true);

      Label resultado = new Label("");

      Button enviar = new Button("Enviar");
      enviar.onAction(o ->
      {
         String cpfFormatado = cpf.getText();            // "123.456.789-00"
         String cpfLimpo     = cpf.getTextWithoutMask(); // "12345678900"
         if (cpfLimpo.length() != 11)
         {
            Hint.show("CPF deve ter 11 dígitos", 2000);
            return;
         }
         resultado.setText(cpfFormatado + " · CEP: " + cep.getText());
      });

      add(LAY_FILL, cpf);
      add(LAY_FILL, cep);
      add(LAY_AUTO, enviar);
      add(LAY_FILL, resultado);
   }
}

नीचे दिया गया अंश केवल मुख्य भाग दिखाता है। चलाने के लिए, इसे ऊपर दिए गए MainWindow ढाँचे में रखें।

न्यूनतम अंश

import dev.crossfly.ui.*;
import dev.crossfly.ui.style.*;
import static dev.crossfly.ui.UIConstants.EditMode;

// CPF: 123.456.789-00
TextField cpf = new TextField("");
cpf.caption("CPF");
cpf.<TextFieldStyle>getStyle()
   .mask("999.999.999-99".toCharArray())
   .mode(EditMode.NUMERIC, true);   // NUMERIC + maskedEdit

// CEP: 12345-678
TextField cep = new TextField("");
cep.caption("CEP");
cep.<TextFieldStyle>getStyle()
   .mask("99999-999".toCharArray())
   .mode(EditMode.NUMERIC, true);

Button enviar = new Button("Enviar");
enviar.onAction(o ->
{
   String cpfFormatado = cpf.getText();            // "123.456.789-00"
   String cpfLimpo     = cpf.getTextWithoutMask(); // "12345678900"
   // cpfLimpo.length() == 11 सत्यापित करके भेजता है
});

गहराई से जानें

क्या यह पृष्ठ उपयोगी था?