# मास्क और कीबोर्ड

> EditMode (तिथि/समय/मुद्रा), '9' के साथ मास्क, नेटिव कीबोर्ड और अंतर्निहित Keypad।

Source: https://crossfly.dev/hi/docs/ui/forms-and-input/masks-and-keyboards — CrossFly documentation. Full docs as one file: https://crossfly.dev/llms-full.txt

# मास्क और कीबोर्ड

फ़ील्ड का `EditMode` **एक साथ दो चीज़ें** नियंत्रित करता है: **फ़ॉर्मेटिंग** (मास्क) और जो
**कीबोर्ड** खुलता है। यह संरचित इनपुट का केंद्रीय भाग है।

## `EditMode` → कीबोर्ड
| `EditMode` | फ़ॉर्मेटिंग | जो कीबोर्ड खुलता है |
|---|---|---|
| `NORMAL` | कोई नहीं | OS का डिफ़ॉल्ट कीबोर्ड |
| `NUMERIC` | अंक | नेटिव न्यूमेरिक (डेस्कटॉप पर `Keypad`) |
| `DATE` | तिथि मास्क | **DatePicker** |
| `TIME` | समय मास्क | **TimePicker** |
| `CURRENCY` | मुद्रा (विभाजक) | **Keypad** कैलकुलेटर |
| `PASSWORD` | अक्षर छिपाता है | डिफ़ॉल्ट कीबोर्ड |

## पूर्ण उदाहरण (कॉपी करें, पेस्ट करें और चलाएँ)
```java
package com.exemplo;

import dev.crossfly.ui.*;
import dev.crossfly.ui.layout.*;
import dev.crossfly.ui.style.*;   // TextFieldStyle (व्यवहारिक कॉन्फ़िग)

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

      // दिनांक फ़ील्ड: मास्क चालू होने पर टच करते ही DatePicker खोलता है
      TextField data = new TextField().caption("Data");
      data.setMode(EditMode.DATE, true);      // maskedEdit=true → फ़ॉर्मेट करता है और DatePicker खोलता है
      add(LAY_AUTO, data);

      // मुद्रा फ़ील्ड: टाइप करते समय मुद्रा के रूप में फ़ॉर्मेट करता है
      TextField valor = new TextField().caption("Valor");
      valor.setMode(EditMode.CURRENCY, true);
      valor.<TextFieldStyle>getStyle().decimalPlaces(2);
      add(LAY_AUTO, valor);

      // लेबल जहाँ पढ़े गए मान प्रदर्शित होंगे
      Label resultado = new Label("");
      add(LAY_AUTO, resultado);

      // प्रति-कुंजी कोई callback नहीं है: सबमिट पर getText() पढ़ें।
      // getTextWithoutMask() केवल अंक लौटाता है (डेटाबेस में सहेजने के लिए अच्छा)।
      Button enviar = new Button("Enviar");
      enviar.onAction(c -> resultado.setText(
         "Data = " + data.getText() + "  |  Valor = " + valor.getTextWithoutMask()));
      add(LAY_AUTO, enviar);
   }
}
```

> नीचे दिए गए स्निपेट **केवल मुख्य भाग** दिखाते हैं (जो `onShow()` के अंदर जाता है)। चलाने के लिए, उन्हें ऊपर दिए गए `MainWindow` ढाँचे में रखें।

## स्वचालित मास्क सक्रिय करना
`setMode(mode, true)` वास्तविक समय की फ़ॉर्मेटिंग (`maskedEdit`) को चालू करता है:
```java
TextField data = new TextField().caption("Data");
data.setMode(EditMode.DATE, true);         // टाइप करते समय, 15/03/2024 बन जाता है और DatePicker खोलता है

TextField valor = new TextField().caption("Valor");
valor.setMode(EditMode.CURRENCY, true);    // टाइप करते समय मुद्रा के रूप में फ़ॉर्मेट करता है
valor.<TextFieldStyle>getStyle().decimalPlaces(2);
```

## कस्टम मास्क (`'9'` अंक है)
एक मास्क में, प्रत्येक `'9'` एक अंक की स्थिति है; अन्य सभी अक्षर निश्चित अक्षरशः हैं:
```java
TextField cpf = new TextField().caption("CPF");
cpf.<TextFieldStyle>getStyle()
   .mask("999.999.999-99".toCharArray())    // 11 अंक + विभाजक
   .mode(EditMode.NUMERIC, true);
// getText()          -> "123.456.789-00"  (मास्क के साथ)
// getTextWithoutMask()-> "12345678900"    (केवल अंक)
```
तैयार मुद्रा: `TextField.getDefaultCurrencyMask(int casasDecimais)` locale के हज़ार/दशमलव विभाजकों के साथ
मास्क उत्पन्न करता है।

## कीबोर्ड को स्पष्ट रूप से चुनना
```java
campo.keyboard(Keyboard.NUMERIC);   // संख्यात्मक लागू करता है
campo.keyboard(Keyboard.NONE);      // कभी कीबोर्ड नहीं खोलता (दृश्य रूप से केवल-पठन फ़ील्ड)
```
`Keyboard` (`UIConstants` में): `NONE, DEFAULT, NUMERIC, KEYPAD, CALCULATOR, DATE, TIME`। `DEFAULT`
वर्तमान `EditMode` में निहित कीबोर्ड अपनाता है।

## अंतर्निहित Keypad
`Keyboard.KEYPAD`/`CALCULATOR` CrossFly के अपने **`Keypad`** कॉम्पोनेंट का उपयोग करते हैं (OS के कीबोर्ड का नहीं)
— कियोस्क/POS में उपयोगी। यह फ़ील्ड द्वारा स्वचालित रूप से खुलता है; इसे अलग से उपयोग करने के लिए:
```java
new Keypad(meuCampo).show();        // फ़ील्ड से संबद्ध संख्यात्मक कीबोर्ड
```

## अच्छे तौर-तरीके
- डेटाबेस में **`getTextWithoutMask()`** (कच्चे अंक) सहेजें; मास्क के साथ प्रदर्शित करें।
- दस्तावेज़ों (CPF, CEP, टेलीफ़ोन) के लिए `mask(...)` को `mode(EditMode.NUMERIC, true)` के साथ जोड़ें।
- डेस्कटॉप पर, `NUMERIC` स्वचालित रूप से `Keypad` पर आ जाता है — नेटिव कीबोर्ड न मानें।

## आम गलतियाँ
- `mode(EditMode.DATE)` को **`maskedEdit=true` के बिना** चालू करना → कोई स्वचालित फ़ॉर्मेटिंग नहीं।
- जब बैक-एंड केवल अंक अपेक्षित करता है तो `getText()` (बिंदुओं/डैश के साथ) को स्थायी करना।
- बिना किसी `'9'` वाला मास्क → कोई अंक स्वीकार नहीं किया जाता।

## यह भी देखें
- [टेक्स्ट फ़ील्ड](/docs/ui/forms-and-input/text-fields) · कैटलॉग: [DatePicker](/docs/ui/widgets/datepicker) · [TimePicker](/docs/ui/widgets/timepicker) · [Keypad](/docs/ui/widgets/keypad)