如何在 Materialisecss 中编辑选项卡的名称？

Question

来自 Stackoverflow 的大家好，希望你们今天过得愉快。我正在做一个项目，我必须使用 Materializecss 框架中的元素选项卡。基本上我想实现以下行为：用户必须能够通过双击当前名称来编辑选项卡的名称。 此图像显示选项卡元素：MATERIALIZE TAB 在此图像中，您检查是否有两个选项卡，我希望通过双击名称“NEWFILTER”自动出现一个当前名称为“newfilter”的文本框，并且可以删除该文本并输入一个新名称.当用户自动按下回车键时，新名称必须作为当前选项卡的名称。你明白吗？？？我怎样才能做到这一点？任何的想法？ 这是materializecss标签的代码：

.tabs {
border: 1px solid grey;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>

<div class="row">
    <div class="col s12">
      <ul class="tabs">
        <li class="tab col s3"><a class="active" href="#test1">NEWFILTER</a></li>
        <li class="tab col s3"><a href="#test2">New Tab</a></li>
      </ul>
    </div>
    <div id="test1" class="col s12">BODY TAB 1</div>
    <div id="test2" class="col s12">BODY TAB 2</div>
  </div>

Answer 1

双击要求可能有点烦人。如果您对单击没问题，可以尝试将选项卡的类型设置为 contenteditable。

否则，执行此操作的一种一般策略可能是：

1. 创建一个覆盖在选项卡名称之上的contenteditable text 字段，其名称与选项卡相同。默认设置为无显示。

2. 将 onclick 侦听器附加到您的选项卡。每次单击选项卡时，设置超时。如果用户在指定时间段内再次点击，则发生双击。

3. 如果发生双击：显示与该选项卡关联的内容可编辑文本字段。

4. 然后，用户可以编辑选项卡。将按键事件监听器附加到 contenteditable 文本字段，以检查用户是否点击了“回车”。

5. 当用户回车时，获取可编辑文本域的innerHTML，更新标签标题，隐藏可编辑文本域。