インライン編集フィールド

<div class="d04-03-01-wrap">
          <span class="d04-03-01-label">お名前</span>
          <div class="d04-03-01-field" tabindex="0">
            <span class="d04-03-01-text">山田 太郎</span>
            <input class="d04-03-01-input" type="text" value="山田 太郎">
            <button type="button" class="d04-03-01-save">保存</button>
          </div>
        </div>

.d04-03-01-wrap{width:min(280px,100%)}
        .d04-03-01-label{display:block;margin:0 0 8px;font-size:12px;color:#8a93a3}
        .d04-03-01-field{
          position:relative;display:flex;align-items:center;gap:8px;
          padding:10px 12px;border:2px solid #d5d9e0;border-radius:8px;
          background:#fff;cursor:pointer;transition:border-color .2s;
        }
        .d04-03-01-field:hover{border-color:#4a6cf7}
        .d04-03-01-text{flex:1;font-size:15px;color:#333}
        .d04-03-01-input{
          flex:1;display:none;font-size:15px;border:none;outline:none;
          padding:0;background:transparent;
        }
        .d04-03-01-save{
          display:none;flex:0 0 auto;padding:6px 12px;font-size:12px;font-weight:700;
          color:#fff;background:#4a6cf7;border:none;border-radius:6px;cursor:pointer;
        }
        .d04-03-01-field.is-edit .d04-03-01-text{display:none}
        .d04-03-01-field.is-edit .d04-03-01-input{display:block}
        .d04-03-01-field.is-edit .d04-03-01-save{display:block}
        .d04-03-01-field.is-saved{border-color:#22b573}

(function(){
        var field=document.querySelector('.d04-03-01-field');
        if(!field)return;
        var text=field.querySelector('.d04-03-01-text');
        var input=field.querySelector('.d04-03-01-input');
        var save=field.querySelector('.d04-03-01-save');
        function enter(){
          field.classList.add('is-edit');
          field.classList.remove('is-saved');
          input.focus();
          input.select();
        }
        function commit(e){
          if(e)e.stopPropagation();
          text.textContent=input.value.trim()||text.textContent;
          field.classList.remove('is-edit');
          field.classList.add('is-saved');
        }
        field.addEventListener('click',function(){
          if(!field.classList.contains('is-edit'))enter();
        });
        save.addEventListener('click',commit);
        input.addEventListener('keydown',function(e){
          if(e.key==='Enter')commit(e);
        });
      })();