Now.js Framework Documentation

Now.js Framework Documentation

PasswordElementFactory

TH 04 Sep 2026 01:40

PasswordElementFactory

PasswordElementFactory Extends the text element with password affordances: a show/hide toggle, a live strength indicator, and a checklist of the rules in config.passwordCriteria. Fields are marked autocomplete="new-password" so browsers do not autofill a stored password into a field meant for choosing a new one.

หน้านี้สร้างจากซอร์สโดยตรงเมื่อ 2026-08-21 คำอธิบายมาจาก JSDoc ในไฟล์
รันซ้ำได้ด้วย docs_scaffold เมื่อโค้ดเปลี่ยน อย่าแก้ด้วยมือถ้าตั้งใจให้ generate ต่อ

ที่มา

  • ไฟล์: Now/js/PasswordElementFactory.js (686 บรรทัด)
  • รูปแบบ: ES class

เมธอดสาธารณะ (5)

static locateStrengthContainer(element)

Find the strength indicator already rendered for this field, if any. Looks at the immediate sibling first, then widens the search, so a strength bar created earlier is reused instead of being duplicated.

static setupCriteriaList(instance)

Render the live checklist of password rules. One list item per enabled entry in config.passwordCriteria. The list is marked aria-live="polite" so screen readers announce rules as they are met.

static setupElement(instance)

Prepare a password field on top of the text element behaviour. Forces autocomplete="new-password" so browsers do not autofill a saved password into a field meant for choosing one, and marks the element so the rest of this factory can recognise it.

static setupEventListeners(instance)

Bind the handlers that update strength, criteria and matching as the user types. Extends the text element listeners, and makes sure the strength bar exists before the first keystroke is handled.

static setupPasswordToggle(instance)

Add the show/hide button next to the field. The button is kept out of the tab order (tabindex="-1") so tabbing moves between fields rather than stopping on it, and its label goes through Now.translate for i18n.

Data attribute ที่ใช้

data-criteria · data-custom-password-field · data-form · data-password-strength · data-target-password

พึ่งพาคลาสอื่น

ElementManager · EventSystemManager · TextElementFactory