SaaS・業務
インライン編集
テキストをクリック／タップでその場編集に切り替え、Enter または保存ボタンで確定、Esc またはキャンセルで元に戻す。
プレビュー
入力
操作実際に入力して試せます。
コード（コピーして使えます）
<div class="ie-card">
<p class="ie-label">プロジェクト名</p>
<div class="ie-field">
<span class="ie-display" id="ie-display-1">新規プロジェクト α</span>
<div class="ie-form hidden" id="ie-form-1">
<input class="ie-input" id="ie-input-1" type="text" />
<div class="ie-actions">
<button class="ie-btn-save" id="ie-save-1">保存</button>
<button class="ie-btn-cancel" id="ie-cancel-1">キャンセル</button>
</div>
</div>
<button class="ie-edit-btn" id="ie-edit-1" aria-label="編集">✎</button>
</div>
<p class="ie-label" style="margin-top:16px">担当者</p>
<div class="ie-field">
<span class="ie-display" id="ie-display-2">田中 一郎</span>
<div class="ie-form hidden" id="ie-form-2">
<input class="ie-input" id="ie-input-2" type="text" />
<div class="ie-actions">
<button class="ie-btn-save" id="ie-save-2">保存</button>
<button class="ie-btn-cancel" id="ie-cancel-2">キャンセル</button>
</div>
</div>
<button class="ie-edit-btn" id="ie-edit-2" aria-label="編集">✎</button>
</div>
<p class="ie-hint">テキストをクリックして編集</p>
</div>