JSFiddle - React, Tailwind, and code Playground

by tea4two

HTML

<form>
    <label for="name">お名前: </label><input type="text" id="name" class="iptFld" value="名前を入力してください">
    <br>
    <label for="email">メールアドレス: </label><input type="text" id="email" class="iptFld" value="メールアドレスいれてね">
    
    <div id="submitArea"><input type="submit" value="送信する">
        </div>
</form>

CSS

.iptFld {
    border: 1px solid #aaa;
    padding: .25em;
    color: #ccc;
}
.iptFld.filled {
    color: #000;
    background-color: #fff;
}
.focused {
    border-color: 1px solid #000;
    background-color: lightyellow;
    color: #000;
}

JavaScript

//それぞれについて処理する
//iptFldにフォーカスするためカプセル化
$('.iptFld').each(function() {
    
    var defval = this.defaultValue; //初期値を取得
    var $field = $(this);
    
    $field
        .focus(function(){
            if( $field.val() === defval ) {
                $field.val('');
                $field.addClass('focused');
            }
        })
        .blur(function(){
            if( $field.val() === '' ) {
                $field.val(defval);
                $field.removeClass('focused filled');
            } else if( $field.val() !== '' ) {
                $field.addClass('filled');
            }
        });
    
});