どのようにMaterializecssのタブの名前を編集できますか？

Question

こんにちは人々から、私はあなたが素晴らしい一日を持っていることを望みます。私はプロジェクトに取り組んでおり、Materializecssフレームワークの要素タブを使用する必要があります。基本的に私は次のような動作を実現したいと考えています。ユーザは、現在の名前をクリックすると、その名前を編集することができなければなりません。この画像でMATERIALIZE TAB は、あなたも、私は名前をダブルクリックして「NEWFILTER」は自動的に現在の名称「newfilter」のテキストボックスに表示されていることを望む、二つのタブがあることを確認し、： この画像は、タブ要素を示していますそのテキストを消去して新しい名前を入力する可能性。ユーザーがEnterキーを押すと、新しい名前を現在のタブの名前として配置する必要があります。わかりますか？？？どうやってやるの？何か案が？ここ は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

ダブルクリックの要件は一種の迷惑である可能性があります。 1回のクリックで大丈夫ならば、タブのタイプをcontenteditableに設定してみてください。

それ以外の場合は、これを行うための一つの一般的な戦略は次のようになります。

1. は、タブと同じ名前で、タブの名前の上にオーバーレイされcontenteditable textフィールドを作成します。デフォルトでは、ディスプレイをnoneに設定します。

2. あなたのタブにonclickリスナーを添付してください。タブがクリックされるたびに、タイムアウトを設定します。ユーザーが指定した時間内に再度クリックすると、ダブルクリックが発生しました。

3. ダブルクリックが起こった場合：そのタブに関連付けられているのcontentEditableテキストフィールドを示しています。

4. 次に、ユーザーはタブを編集できます。キー入力イベントリスナをcontenteditableテキストフィールドにアタッチし、ユーザが「enter」を押したかどうかをチェックします。

5. ユーザーがenterキーを押すと、編集可能なテキストフィールドのinnerHTMLを取得し、タグのタイトルを更新し、編集可能なテキストフィールドを非表示にします。