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

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

दिखाएँ/छिपाएँ के साथ पासवर्ड फ़ील्ड कैसे बनाएँ

उद्देश्य. एक ऐसा फ़ील्ड बनाना जो वर्णों को छिपाए (•••• प्रदर्शित करते हुए) और, वैकल्पिक रूप से, दाईं ओर एक आइकन जो पासवर्ड दिखाने और छिपाने के बीच टॉगल करता है।

उपयोग की गई APIs

  • campo.<TextFieldStyle>getStyle().mode(EditMode.PASSWORD) — पासवर्ड मोड चालू करता है। वर्ण passwordChar के रूप में प्रदर्शित होते हैं (डिफ़ॉल्ट '*'; .passwordChar('•') से बदलें)।
  • campo.<TextFieldStyle>getStyle().passwordToggle(true) — दाईं ओर के आइकन में स्वचालित रूप से दिखाएँ/छिपाएँ बटन जोड़ता है। यदि passwordToggle चालू है, तो फ़ील्ड पहले से ही डिफ़ॉल्ट रूप से PASSWORD मान लेता है और ensurePasswordToggleIcons() के माध्यम से डिफ़ॉल्ट आँख के आइकन (बंद / खुला) इंजेक्ट करता है।
  • campo.<TextFieldStyle>getStyle().passwordHiddenIcon(icon) / .passwordVisibleIcon(icon) — आइकन को अनुकूलित करता है (वैकल्पिक)।
  • TextField.isPassword() — जब तक मोड PASSWORD है तब तक true लौटाता है (सशर्त तर्क के लिए उपयोगी)।
  • TextField.getText() — पासवर्ड को शुद्ध टेक्स्ट में लौटाता है (मास्किंग केवल दृश्य है)।

टॉगल आंतरिक रूप से onTouchUp में संभाला जाता है: दाईं ओर के आइकन को टैप करने पर, मोड डिफ़ॉल्ट और focused स्टाइल में PASSWORD और NORMAL के बीच टॉगल होता है, और आइकन बदल जाता है। आपको rightIconAction पंजीकृत करने की आवश्यकता नहीं है — यदि आप स्वचालित व्यवहार चाहते हैं तो दाईं ओर के आइकन को ओवरराइड न करें।

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

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());

      // साधारण पासवर्ड (दिखाने का बटन नहीं)
      TextField senha = new TextField("");
      senha.caption("Senha");
      senha.<TextFieldStyle>getStyle().mode(EditMode.PASSWORD);

      // दिखाने/छिपाने के बटन के साथ पासवर्ड
      TextField senhaToggle = new TextField("");
      senhaToggle.caption("Confirmar senha");
      senhaToggle.<TextFieldStyle>getStyle()
         .mode(EditMode.PASSWORD)
         .passwordToggle(true);   // आँख का आइकन स्वचालित रूप से जोड़ता है

      Label resultado = new Label("");

      Button entrar = new Button("Entrar");
      entrar.onAction(o ->
      {
         String pwd = senha.getText();          // वास्तविक टेक्स्ट, मास्क नहीं किया गया
         String pwd2 = senhaToggle.getText();
         if (!pwd.equals(pwd2))
         {
            Hint.show("As senhas não coincidem", 2000);
            return;
         }
         resultado.setText("Senha confirmada (" + pwd.length() + " caracteres)");
      });

      add(LAY_FILL, senha);
      add(LAY_FILL, senhaToggle);
      add(LAY_AUTO, entrar);
      add(LAY_FILL, resultado);
   }
}

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

न्यूनतम अंश

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

// साधारण पासवर्ड (दिखाने का बटन नहीं)
TextField senha = new TextField("");
senha.caption("Senha");
senha.<TextFieldStyle>getStyle().mode(EditMode.PASSWORD);

// दिखाने/छिपाने के बटन के साथ पासवर्ड
TextField senhaToggle = new TextField("");
senhaToggle.caption("Senha");
senhaToggle.<TextFieldStyle>getStyle()
   .mode(EditMode.PASSWORD)
   .passwordToggle(true);   // आँख का आइकन स्वचालित रूप से जोड़ता है

Button entrar = new Button("Entrar");
entrar.onAction(o ->
{
   String pwd = senhaToggle.getText(); // वास्तविक टेक्स्ट, मास्क नहीं किया गया
   // ... प्रमाणित करता है
});

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

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