javascript - 如何在 Materializecss 中编辑选项卡的名称？

Question

Stackoverflow 的 friend 们大家好，希望你们今天过得愉快。我正在开发一个项目，我必须使用 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. 然后，用户就可以编辑选项卡了。将按键事件监听器附加到可编辑文本字段，以检查用户是否按下了“Enter”。

5. 当用户按 Enter 时，获取可编辑文本字段的innerHTML，更新标签的标题，并隐藏可编辑文本字段。