<main class="main-wrapper">
<form name="input-sample" method="post" action="">
<fieldset>
<legend class="heading2">Type Text</legend>
<div class="input-text-container">
<label for="name" class="input-text-label">お名前 :</label>
<input type="text" id="name" name="name" placeholder="姓 名" maxlength="50" required class="input-text">
</div>
</fieldset>
<div class="divider my32" role="separator"></div>
<fieldset>
<legend class="heading2">Type Email</legend>
<div class="input-text-container">
<label for="email" class="input-text-label">Emailアドレス :</label>
<input type="email" id="email" name="email" pattern=".{1,}@.*" placeholder="xxxx@xxx.com(.co.jpなど)" maxlength="50" required class="input-text">
</div>
</fieldset>
<div class="divider my32" role="separator"></div>
<fieldset>
<legend class="heading2">Type Password</legend>
<div class="input-text-container">
<label for="password" class="input-text-label">パスワード1 :</label>
<input type="password" id="password" class="js-display-pass input-text" name="password" placeholder="英数字8文字以上" required autocomplete>
<label class="password-toggle">
<input type="checkbox" id="js-show-pass"> パスワードを表示する
</label>
<div class="divider my32" role="separator"></div>
<div class="input-password-wrapper">
<label for="js-input" class="input-text-label">パスワード2 :</label>
<input type="password" id="js-input" class="input-text" name="password" placeholder="英数字8文字以上" required autocomplete><button type="button" id="js-reveal-btn" class="password-toggle -button" aria-pressed="false">パスワードを表示する</button>
</div>
</div>
</fieldset>
<div class="divider my32" role="separator"></div>
<fieldset>
<legend class="heading2">Textarea</legend>
<div class="input-text-container">
<label for="textarea" class="textarea-label">問い合わせ内容 :</label>
<textarea id="textarea" name="message" placeholder="内容をご記入ください" required class="textarea"></textarea>
</div>
</fieldset>
</form>
</main>
<main class="main-wrapper">
<form name="input-sample" method="post" action="">
<fieldset>
<legend class="heading2">Type Text</legend>
<div class="input-text-container">
<label for="name" class="input-text-label">お名前 :</label>
<input type="text" id="name" name="name" placeholder="姓 名" maxlength="50" required class="input-text">
</div>
</fieldset>
<div class="divider my32" role="separator"></div>
<fieldset>
<legend class="heading2">Type Email</legend>
<div class="input-text-container">
<label for="email" class="input-text-label">Emailアドレス :</label>
<input type="email" id="email" name="email" pattern=".{1,}@.*" placeholder="xxxx@xxx.com(.co.jpなど)" maxlength="50" required class="input-text">
</div>
</fieldset>
<div class="divider my32" role="separator"></div>
<fieldset>
<legend class="heading2">Type Password</legend>
<div class="input-text-container">
<label for="password" class="input-text-label">パスワード1 :</label>
{{!-- チェックボックス式パスワード表示/非表示切り替え --}}
<input type="password" id="password" class="js-display-pass input-text" name="password" placeholder="英数字8文字以上" required autocomplete>
<label class="password-toggle">
<input type="checkbox" id="js-show-pass"> パスワードを表示する
</label>
<div class="divider my32" role="separator"></div>
{{!-- ボタン式パスワード表示/非表示切り替え --}}
<div class="input-password-wrapper">
<label for="js-input" class="input-text-label">パスワード2 :</label>
<input type="password" id="js-input" class="input-text" name="password" placeholder="英数字8文字以上" required autocomplete><button type="button" id="js-reveal-btn" class="password-toggle -button" aria-pressed="false">パスワードを表示する</button>
</div>
</div>
</fieldset>
<div class="divider my32" role="separator"></div>
<fieldset>
<legend class="heading2">Textarea</legend>
<div class="input-text-container">
<label for="textarea" class="textarea-label">問い合わせ内容 :</label>
<textarea id="textarea" name="message" placeholder="内容をご記入ください" required class="textarea"></textarea>
</div>
</fieldset>
</form>
</main>
/* No context defined. */
/* /js/modules/PasswordReveal.js */
/**
* PasswordReveal class - 2type
*/
export class PasswordRevealCheckbox {
constructor(password, showPassword) {
this.password = document.querySelector(password);
this.showPassword = document.getElementById(showPassword);
if(this.password != null) {
this.showPassword.addEventListener('change',this.onShowPassword.bind(this), true);
}
}
onShowPassword() {
const type = this.showPassword.checked ? 'text' : 'password';
this.password.setAttribute('type', type);
}
}
export class PasswordRevealButton {
constructor(input, button) {
this.input = document.getElementById(input);
this.button = document.getElementById(button);
if(this.input != null) {
this.button.addEventListener('click', this.onButtonClick.bind(this), false);
}
}
onButtonClick() {
if(this.input.type === 'password') {
this.input.type = 'text';
this.button.innerText = 'パスワードを隠す';
this.button.setAttribute('aria-pressed', 'true');
} else{
this.input.type = 'password';
this.button.innerText = 'パスワードを表示する';
this.button.setAttribute('aria-pressed', 'false');
}
}
}
/* /js/main.js */
const passwordRevealCheckbox = new PasswordRevealCheckbox('.js-display-pass', 'js-show-pass');
const passwordRevealBottun = new PasswordRevealButton('js-input', 'js-reveal-btn');
.input-text-container {
width: 75%;
margin: auto;
box-sizing: border-box;
}
.input-text-container .password-toggle {
margin-top: .5rem;
cursor: pointer;
}
@media print, screen and (min-width:64.0625em) {
.input-text-container .password-toggle {
margin-left: 24.5%;
}
}
.input-text-container .password-toggle [type="checkbox"] {
cursor: inherit;
}
@media print, screen and (max-width:64em) {
.input-text-container .password-toggle.-button {
width: 25%;
height: 100%;
min-height: 50px;
padding: .1rem;
vertical-align: top;
}
}
@media print, screen and (max-width:47.96875em) {
.input-text-container .password-toggle.-button {
font-size: calc(var(--font-size-s2));
}
}
.input-text-label {
width: 24%;
}
@media print, screen and (min-width:64.0625em) {
.input-text-label {
display: inline-block;
font-size: calc(var(--font-size-m2));
}
}
@media print, screen and (max-width:64em) {
.input-text-label {
display: block;
width: 100%;
margin-bottom: .7rem;
}
}
.input-text {
display: inline-block;
margin: auto;
border: 1px solid #333;
line-height: 1.5;
box-shadow: 1px 1px 2px 1px hsla(0, 0%, 0%, .15) inset;
}
@media print, screen and (min-width:64.0625em) {
.input-text {
width: 75%;
padding: .65rem 1rem;
font-size: calc(var(--font-size-m2));
}
}
@media print, screen and (max-width:64em) {
.input-text {
width: 100%;
padding: .75rem .9rem;
font-size: calc(var(--font-size-m1) - .1rem);
}
}
.input-text:focus {
border-width: 2px;
box-shadow: 2px 2px 4px 2px hsla(0, 0%, 0%, .15) inset;
}
@media print, screen and (min-width:64.0625em) {
.input-text:focus {
padding: calc(.65rem - 1px) calc(1rem - 1px);
}
}
@media print, screen and (max-width:64em) {
.input-text:focus {
padding: calc(.75rem - 1px) calc(.9rem - 1px);
}
}
.textarea-label {
vertical-align: top;
}
@media print, screen and (min-width:64.0625em) {
.textarea-label {
width: 24%;
margin-top: .625rem;
font-size: calc(var(--font-size-m2));
}
}
@media print, screen and (max-width:64em) {
.textarea-label {
width: 100%;
}
}
.textarea {
display: inline-block;
margin: auto;
border: 1px solid #333;
line-height: 1.5;
box-shadow: 1px 1px 2px 1px hsla(0, 0%, 0%, .15) inset;
resize: vertical;
}
@media print, screen and (min-width:64.0625em) {
.textarea {
width: 75%;
height: 200px;
padding: 1.2rem 1rem;
font-size: calc(var(--font-size-m2));
}
}
@media print, screen and (max-width:64em) {
.textarea {
width: 100%;
height: 170px;
padding: .8rem;
font-size: calc(var(--font-size-m1) - .1rem);
}
}
.textarea:focus {
border-width: 2px;
box-shadow: 2px 2px 4px 2px hsla(0, 0%, 0%, .15) inset;
}
@media print, screen and (min-width:64.0625em) {
.textarea:focus {
padding: calc(1.2rem - 1px) calc(1rem - 1px);
}
}
@media print, screen and (max-width:64em) {
.textarea:focus {
padding: calc(.8rem - 1px);
}
}
input[type="password"]::-ms-reveal {
display: none;
}
@media print, screen and (min-width:64.0625em) {
.input-password-wrapper {
display: flex;
justify-content: space-between;
width: 100%;
}
}
.input-password-wrapper .password-toggle {
min-width: 21%;
margin: 0;
border-top: 1px solid #333;
border-right: 1px solid #333;
border-bottom: 1px solid #333;
}
@media print, screen and (min-width:64.0625em) {
[for="js-input"] {
margin-top: .8rem;
}
}
#js-input.input-text {
min-height: 50px;
margin: 0;
}
@media print, screen and (min-width:64.0625em) {
#js-input.input-text {
width: 55%;
}
}
@media print, screen and (max-width:64em) {
#js-input.input-text {
width: 75%;
}
}
No notes defined.