html - 使卡片标题成为可编辑的文本字段

Question

所以我使用的是 bulma 卡片，而不是只有一个固定的标题，我想让标题成为一个可编辑的文本字段。这并不难实现我只是把文本字段放在里面

<p class="card-header-title"> </p>

然后我得到的是一个横跨卡片整个宽度的文本字段。那么如何让它变小并左对齐呢？到目前为止，我尝试了文本字段的大小参数，还使用了标题中的列，但结果不一。

Answer 1

这里有两个选项:

1. 使用<input type="text" />
2. 使用 contenteditable制作 .card-header-title可编辑

在第一个选项中，我们会给输入一个类，这样我们就可以定义一个特定的宽度。

第二个选项需要一些 JavaScript 来更新 hidden输入字段，以便您可以在需要时访问表单中更新的标题。

.container {
  padding: 20px;
}

.card {
  margin-bottom: 20px;
}

.card-header-title-input {
  font-size: inherit;
  font-weight: inherit;
  width: 50%;
  display: block;
}

.card-header-title--editable {
  outline: none;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.css" rel="stylesheet" />

<div class="container is-fluid">
  <div class="card">
    <header class="card-header">
      <p class="card-header-title">
        <input type="text" class="card-header-title-input" value="Component">
      </p>
      <a href="#" class="card-header-icon" aria-label="more options">
        <span class="icon">
        <i class="fas fa-angle-down" aria-hidden="true"></i>
      </span>
      </a>
    </header>
    <div class="card-content">
      <div class="content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.
        <a href="#">@bulmaio</a>. <a href="#">#css</a> <a href="#">#responsive</a>
        <br>
        <time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
      </div>
    </div>
    <footer class="card-footer">
      <a href="#" class="card-footer-item">Save</a>
      <a href="#" class="card-footer-item">Edit</a>
      <a href="#" class="card-footer-item">Delete</a>
    </footer>
  </div>

  <div class="card">
    <header class="card-header">
      <p class="card-header-title card-header-title--editable" contenteditable>
        Component
      </p>
      <a href="#" class="card-header-icon" aria-label="more options">
        <span class="icon">
        <i class="fas fa-angle-down" aria-hidden="true"></i>
      </span>
      </a>
    </header>
    <div class="card-content">
      <div class="content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.
        <a href="#">@bulmaio</a>. <a href="#">#css</a> <a href="#">#responsive</a>
        <br>
        <time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
      </div>
    </div>
    <footer class="card-footer">
      <a href="#" class="card-footer-item">Save</a>
      <a href="#" class="card-footer-item">Edit</a>
      <a href="#" class="card-footer-item">Delete</a>
    </footer>
  </div>
</div>