Skip to content

Commit

Permalink
make type attribute optional
Browse files Browse the repository at this point in the history
by setting it internally
  • Loading branch information
tobz-nz committed Jan 8, 2024
1 parent b99c927 commit 674bd6c
Show file tree
Hide file tree
Showing 3 changed files with 9 additions and 7 deletions.
4 changes: 2 additions & 2 deletions demo.html
Original file line number Diff line number Diff line change
Expand Up @@ -16,12 +16,12 @@
<br>

<label for="password_confirm">Confirm Password</label>
<input autocomplete="none" data-1p-ignore type="password" name="password_confirm" id="password_confirm" is="x-password" value="hidden" confirm-target="password">
<input autocomplete="none" data-1p-ignore name="password_confirm" id="password_confirm" is="x-password" value="hidden" confirm-target="password">

<br>

<label for="password_confirm">Visible Password</label>
<input autocomplete="none" data-1p-ignore type="password" name="visibile_password" id="visibile_password" is="x-password" value="not hidden" visible>
<input autocomplete="none" data-1p-ignore name="visibile_password" id="visibile_password" is="x-password" value="not hidden" visible>

<br>

Expand Down
6 changes: 2 additions & 4 deletions readme.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
# &lt;x-password&gt;

A password input natively enhanced via a Custom Element (Web Component).

It adds the ability to toggle visibility and validation to confirm it matches the value of another field
Expand All @@ -11,7 +9,7 @@ It adds the ability to toggle visibility and validation to confirm it matches th
## Usage

```html
<script src="" type="module"></script>
<script src="https://tobz-nz.github.io/x-password/x-password.js" type="module"></script>

<form onsubmit="return false">
<label for="password">Password</label>
Expand All @@ -20,7 +18,7 @@ It adds the ability to toggle visibility and validation to confirm it matches th
<br>

<label for="password_confirm">Confirm Password</label>
<input type="password" name="password_confirm" id="password_confirm" is="x-password" confirm-target="password">
<input is="x-password" name="password_confirm" id="password_confirm" confirm-target="password">

<br>

Expand Down
6 changes: 5 additions & 1 deletion x-password.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
customElements.define('x-password', class extends HTMLInputElement {
static get observedAttributes() {
return ["visible"]
return ['visible']
}

constructor() {
Expand All @@ -18,6 +18,10 @@ customElements.define('x-password', class extends HTMLInputElement {
}

connectedCallback() {
if (!this.getAttribute('type')) {
this.setAttribute('type', 'password')
}

if (this.hasAttribute('confirm-target')) {
const confirmTarget = document.getElementById(this.getAttribute('confirm-target'))

Expand Down

0 comments on commit 674bd6c

Please sign in to comment.