パーツ番号 04-11-09 ・ JavaScript使用

フェードインエラーメッセージ欄

フォーカスアウト時に未入力だった場合のみ、エラーメッセージがふわっと下からフェードインする入力欄。WordPressの会社概要フォームなどでエラー表示を控えめかつ丁寧に見せられます。

jsinput

プレビュー

ソースコード

HTML

<div class="d04-11-09-field">
          <label class="d04-11-09-label" for="d04-11-09-input">会社名</label>
          <input type="text" class="d04-11-09-input" id="d04-11-09-input" placeholder="株式会社サンプル">
          <p class="d04-11-09-err">会社名を入力してください</p>
        </div>

CSS

.d04-11-09-field{width:min(260px,100%)}
        .d04-11-09-label{display:block;margin-bottom:6px;font-size:13px;color:#555;font-weight:700}
        .d04-11-09-input{width:100%;padding:12px 14px;font-size:14px;border:2px solid #d5d9e0;border-radius:8px;outline:none;background:#fff;transition:border-color .25s}
        .d04-11-09-input:focus{border-color:#4a6cf7}
        .d04-11-09-field.is-error .d04-11-09-input{border-color:#e5484d}
        .d04-11-09-err{margin:6px 0 0;font-size:12px;color:#e5484d;opacity:0;transform:translateY(-6px);transition:opacity .3s ease,transform .3s ease;pointer-events:none}
        .d04-11-09-field.is-error .d04-11-09-err{opacity:1;transform:translateY(0)}

JavaScript

(function(){
        var field=document.querySelector('.d04-11-09-field');
        if(!field)return;
        var input=field.querySelector('.d04-11-09-input');
        input.addEventListener('blur',function(){
          field.classList.toggle('is-error',input.value.trim()==='');
        });
        input.addEventListener('input',function(){
          if(input.value.trim()!=='')field.classList.remove('is-error');
        });
      })();

クラス名 .d04-11-09 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。