The Options For Password Revealing Inputs

افلاطون کے ذریعہ دوبارہ شائع کیا گیا۔

فالونگ: 0

HTML میں، پاس ورڈز سے نمٹنے کے لیے ایک بہت واضح ان پٹ قسم ہے:

<input type="password">

اگر آپ اسے استعمال کرتے ہیں تو، جب آپ اس میں ٹائپ کرتے ہیں تو آپ کو مبہم بلٹ پوائنٹس ملتے ہیں، جیسے:

یہی ویب سیکیورٹی میں مدد کرنے کی کوشش کر رہا ہے۔ اگر اس نے ایسا نہیں کیا تو، کلاسک مسئلہ یہ ہے کہ کوئی آپ کے کندھے پر جھانک رہا ہے، آپ جس چیز میں داخل ہو رہے ہیں اس کی جاسوسی کر سکتا ہے۔ مجھے لگتا ہے کہ آپ کی انگلیاں کون سی چابیاں دباتی ہیں یہ دیکھنے سے زیادہ آسان ہے۔

لیکن UX تھوڑا سا تیار ہوا ہے، اور یہ ایک آپشن کا ہونا بہت عام ہے جیسے:

☑️ پاس ورڈ ظاہر کریں؟

میرے خیال میں خیال یہ ہے کہ ہمارے پاس ایک انتخاب ہونا چاہئے۔ ہم میں سے اکثر لوگ اس کے بارے میں فوری نظر ڈال سکتے ہیں اور دیکھ سکتے ہیں کہ آیا کوئی پرجوش آنکھیں ہیں، اور اگر نہیں، تو ہم اپنا پاس ورڈ ظاہر کرنے کا انتخاب کر سکتے ہیں تاکہ ہم یہ یقینی بنا سکیں کہ ہم ٹائپ کرتے ہیں۔ [ای میل محفوظ] صحیح طریقے سے اور اسے 8 بار غلط ٹائپ کرنے کی اذیت سے دوچار نہیں کیا جاتا۔

تو! کیا کرنا ہے؟

آپشن 1: استعمال کریں۔ `type="password"`، پھر اسے تبدیل کریں۔ `type="text"` جاوا اسکرپٹ کے ساتھ

یہ وہی ہے جو ابھی ہر کوئی کر رہا ہے، کیونکہ یہ وہی ہے جو اس وقت تمام براؤزرز پر کام کرتا ہے۔

const input = document.querySelector(".password-input"); // When an input is checked, or whatever...
if (input.getAttribute("type") === "password") { input.setAttribute("type", "text");
} else { input.setAttribute("type", "password");
}

یہاں مسئلہ - اس کے علاوہ یہ عجیب ہے کہ آپ کو صرف اس کے لیے ان پٹ کی قسمیں تبدیل کرنا ہوں گی - پاس ورڈ مینیجر ٹولز ہیں۔ کاش میرے پاس اس کی قطعی تفصیلات ہوتی، لیکن یہ مجھے حیران نہیں کرتا کہ ان پٹ کی قسموں کے ساتھ گڑبڑ کرنے سے کسی بھی ٹول کو الجھایا جا سکتا ہے جو خاص طور پر پاس ورڈز کو تلاش کرنے اور پہلے سے بھرنے کے لیے ڈیزائن کیا گیا ہو، ہو سکتا ہے کہ براؤزرز میں خود ہی بنائے گئے ٹولز بھی۔

آپشن 2: استعمال کریں۔ `-webkit-text-security` سی ایس ایس میں

یہ ایک حقیقی آپشن نہیں ہے کیونکہ آپ صرف کچھ براؤزرز میں مکمل ان پٹ کام نہیں کر سکتے اور دوسروں میں نہیں۔ لیکن واضح طور پر اس فعالیت کو کسی وقت CSS میں منتقل کرنے کی خواہش تھی، جیسا کہ یہ کچھ براؤزرز میں کام کرتا ہے۔

input[type="password"] { -webkit-text-security: square;
}
form.show-passwords input[type="password"] { -webkit-text-security: none;
}

آپشن 3: `input-security` سی ایس ایس میں

کے لیے ایڈیٹر کا ڈرافٹ اسپیک موجود ہے۔ ان پٹ سیکورٹی. یہ بنیادی طور پر ٹوگل ویلیو ہے۔

form.show-passwords input[type="password"] { input-security: none;
}

مجھے یہ پسند ہے. سادہ لیکن مجھے نہیں لگتا کہ ابھی تک کوئی براؤزر اس کی حمایت کرتا ہے۔ لہذا، حقیقت پسندانہ طور پر، ہم ابھی کے لیے آپشن #1 کے ساتھ پھنس گئے ہیں۔