<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. */
  • Content:
    /* /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');
  • URL: /components/raw/input-field/index.js
  • Filesystem Path: src/components/3-form-ui/input-field/index.js
  • Size: 1.4 KB
  • Content:
    .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%;
      }
    }
  • URL: /components/raw/input-field/style.css
  • Filesystem Path: src/components/3-form-ui/input-field/style.css
  • Size: 3.7 KB

No notes defined.