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。

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

创建一个覆盖在标签名称顶部的contenteditable text字段，其名称与标签相同。默认情况下将显示设置为无。
将onclick侦听器附加到选项卡。每次单击选项卡时，都会设置超时。如果用户在指定的时间段内再次点击，则会发生双击。
如果发生双击：显示与该标签关联的可信任文本字段。
然后，用户可以编辑选项卡。将keypress eventlistener附加到contenteditable文本字段，以检查用户是否已点击“enter”。
当用户点击进入时，获取可编辑文本字段的innerHTML，更新标记的标题，并隐藏可编辑的文本字段。

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

1 个答案: