Wie kann ich den Namen einer Registerkarte in Materializecss bearbeiten?

Question

Hallo Leute von Stackoverflow, ich hoffe ihr habt einen schönen Tag. Ich arbeite an einem Projekt und muss die Element-Registerkarten aus dem Materialisecss-Framework verwenden. Grundsätzlich möchte ich folgendes Verhalten erreichen: Der Benutzer muss in der Lage sein, den Namen der Registerkarte zu bearbeiten, indem er auf den aktuellen Namen doppelklickt. Dieses Bild zeigt das Tabs Element: MATERIALIZE TAB In diesem Bild überprüfen Sie, dass es zwei Registerkarten gibt, nun möchte ich, dass durch einen Doppelklick auf den Namen "NEWFILTER" automatisch ein Textfeld mit dem aktuellen Namen "newfilter" und der Möglichkeit, diesen Text zu löschen und einen neuen Namen einzugeben. Wenn der Benutzer die Eingabetaste automatisch drückt, muss der neue Name als Name der aktuellen Registerkarte eingegeben werden. Verstehst du??? Wie kann ich das machen? Irgendeine Idee? Hier ist der Code von materializecss tab:

.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

Der Doppelklick Anforderung Art lästig sein könnte. Sie könnten versuchen, den Typ Ihrer Tabs auf contenteditable zu setzen, wenn Sie keine Einzelklicks haben.

Andernfalls eine allgemeine Strategie dafür sein könnte tun:

1. erstellen contenteditable text Feld, das oben auf den Namen des Registerkarten, mit dem gleichen Namen wie die Registerkarten überlagert wird. Stellen Sie die Anzeige standardmäßig auf Keine.

2. Hängen Sie einen onclick-Listener an Ihre Registerkarten an. Jedes Mal, wenn auf die Registerkarte geklickt wird, legen Sie eine Zeitüberschreitung fest. Wenn der Benutzer innerhalb des angegebenen Zeitraums erneut klickt, wurde ein Doppelklick ausgeführt.

3. Wenn ein Doppelklick passiert ist: Zeigen Sie das zufrieden stellende Textfeld an, das dieser Registerkarte zugeordnet ist.

4. Dann kann der Benutzer die Registerkarte bearbeiten. Fügen Sie einen keypress eventlistener in das Textfeld contenteditable ein, um zu prüfen, ob der Benutzer "enter" gedrückt hat.

5. Wenn der Benutzer auf Enter klickt, rufen Sie innerHTML des bearbeitbaren Textfelds ab, aktualisieren Sie den Titel des Tags und blenden Sie das bearbeitbare Textfeld aus.