contentEditable span - preventDefault funktioniert nicht

Der Versuch, die Eingabe zu stoppen, wird beim Erstellen einer bearbeitbaren Spanne von
verursacht. Ich habe versucht zu suchen, hatte aber kein Glück. Tastenbetätigungen werden gut erkannt, mit Alarmen getestet, aber nur preventDefault(); scheint nicht zu funktionieren. Ich habe gesucht und dies scheint die Art und Weise zu sein, dass andere Leute verhindert haben, dass
bei der Eingabe erstellt wird.contentEditable span - preventDefault funktioniert nicht

$(document).on('focus', '.note>span', function(){ //edit notes 
     var storedNote = $(this).text(); 
     var storedNoteIndex = notes.indexOf(storedNote); 
     $(this).keyup(function (e) { //edit notes 
      var newNote = $(this).text(); 
      if(newNote != "" && newNote != " " && newNote.charAt(0) != " ") { 
       if (e.keyCode == 13 && e.shiftKey) { 
        alert('enter+shift'); 
       } 
       else if(e.keyCode == 13){ 
        e.preventDefault(); 
       } 
       var newNote = $(this).text(); 
       notes.splice(storedNoteIndex, 1, newNote); 
       chrome.storage.sync.set({'notes':notes}); 
      } 
      else{ 
       notes.splice(storedNoteIndex, 1); 
       chrome.storage.sync.set({'notes':notes}); 
      } 
     }); 
    })

Hier ist die html die js entsprechen:

 <div id="icon-wrapper"> 
      <div id="notes-icon" class="icons glyphicon glyphicon-list-alt"></div> 
      <div id="bg-left" class="icons glyphicon glyphicon-chevron-left"></div> 
      <div id="bg-right" class="icons glyphicon glyphicon-chevron-right"></div> 
      <div id="refresh" class="icons glyphicon glyphicon-refresh"></div> 
      <div id="pin" class="icons"></div> 
     </div> 

     <div id="time-wrapper"> 
      <div id="time"></div> 
      <div id="date"></div> 
     </div> 

     <div id="input-wrapper"> 
      <input type="text" id="input-box" placeholder="Create a note"> 
     </div> 

     <div id="notes-wrapper"> 
      <div class="note"> 
       <span contenteditable="true"></span> 
       <div class="remove glyphicon glyphicon-remove"></div> 
      </div> 
     </div>

Quelle

2016-06-04 lewis

Bitte senden Sie das html – DottedT

@DottedT leid, entlang – lewis

keyup gehen in html hinzugefügt nicht abgebrochen werden. –

I Formen glauben an keydown vorgelegt werden, so durch die Zeit, Ihre keyup Ereignis das Formular bereits eingereicht wurde passiert. Versuchen Sie es zu

$(this).on('keydown keyup', function(e) { 
 
    console.log(e); 
 
})

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

 
<body contenteditable>Change Me</body>

Ändern

Quelle

2016-06-04 03:22:30 CascadiaJS

Verklagst du ein Javascript-Plugin, das sich an das Span-Tag anhängen würde? Wenn nicht, dann müsste die Spanne contenteditable = "true" als Attribut dafür benötigen. Probieren Sie es aus und lassen Sie es uns wissen. – DottedT

Das hat perfekt funktioniert! Danke, habe nicht gemerkt, dass Keydown keyup funktioniert, vielen Dank! – lewis

Und yep DottedT Ich hatte contenteditable = true als Attribut, verwendete keine Plugins. Danke für die Hilfe Jungs :) – lewis

contentEditable span - preventDefault funktioniert nicht

Antwort

Verwandte Themen