Ich brauche Hilfe, um Textbereich unter bestimmten Bedingungen zu leeren

Question

Ich habe Textbereichssteuerungen in meiner Seite und ich hatte Code so, dass, wenn Benutzer auf Textbereich klicken oder 'ENTER' -Taste drücken, wird es Schuss bullet-Liste in erstellen Textbereich. Aber das Problem ist, dass wenn der Benutzer auf den Textbereich klickt und er eine Aufzählungsliste erstellt, aber wenn der Benutzer nichts in den Textbereich eingibt, sollte er leer werden und der Aufzählungszeichen sollte entfernt werden. In einer einfachen Art und Weise sollte der Textbereich bullet-list entfernt werden, wenn er keine Daten enthält. Und noch eine Sache ist zu verhindern, dass Benutzer bullet aus dem Textbereich löscht.

hier mein Code:

<textarea name="MondayAcomp" id="MondayAcomp" cols="45" rows="5" onKeyDown="if(event.keyCode == 13) return false;" onKeyUp="bulletOnEnter(this.id)" onFocus="onfoc(this.id)" onBlur="onFocOff(this.id)" style="margin: 0px; width: 200px; height: 219px;"></textarea> 

Javascript-Funktionen:

function onfoc(id) { 
    if (document.getElementById(id).value == "") { 
     document.getElementById(id).value += '• '; 
    } 
} 

function onFocOff(id) { 
    if (document.getElementById(id).value == '• ') { 
     document.getElementById(id).empty; 
    } 
} 

function bulletOnEnter(id) { 
    var keycode = (event.keyCode ? event.keyCode : event.which); 

    if (keycode == '13') { 
     event.preventDefault(); 
     document.getElementById(id).value += '\n• '; 
    } 

    var txtval = document.getElementById(id).value; 

    if (txtval.substr(txtval.length - 1) == '\n') { 
     document.getElementById(id).value = txtval.substring(0, txtval.length - 1); 
    } 
} 

jsfiddle here

Answer 1

1. Es ist nicht .empty, ist es .value = "";.
2. Für die keyCode müssen Sie auch event Parameter an Ihre Callback-Funktion übergeben.
3. Sie können das Hinzufügen von Leerzeilen verhindern, indem Sie auch die letzte Zeile in Ihrem return Schlüssel-Callback überprüfen.
4. Nur so kann ich Bild, um zu verhindern, die Kugeln zu löschen, ist eine Schleife am Ende und überprüfen Sie jede Zeile starten.

function onfoc(id) { 
 
    if(document.getElementById(id).value == '') { 
 
     document.getElementById(id).value +='• '; 
 
    } 
 
} 
 

 
function onFocOff(id) { 
 
    if(document.getElementById(id).value == '• ') { 
 
     document.getElementById(id).value = ''; 
 
    } 
 
} 
 

 
function bulletOnEnter(event, id) { 
 
    event = event || window.event; 
 

 
    // handle 'return' key 
 
    var keycode = event.keyCode || event.charCode || event.which; 
 
    var txtval = document.getElementById(id).value; 
 
    if(keycode == 13 && txtval.substr(txtval.length - 2) != '• ') { 
 
     event.preventDefault(); 
 
     document.getElementById(id).value += '\n• '; 
 
    } 
 

 
    // remove possible last empty line 
 
    txtval = document.getElementById(id).value; 
 
    if(txtval.substr(txtval.length - 1) == '\n') { 
 
     document.getElementById(id).value = txtval.substring(0, txtval.length - 1); 
 
    } 
 

 
    // check if each line starts with a bullet 
 
    var lines = document.getElementById(id).value.split('\n') 
 
    for(var i = 0, l = lines.length; i < l; i++) { 
 
     if(lines[i].substr(0, 1) !== '•') { 
 
      lines[i] = '•' + lines[i]; 
 
     } 
 
    } 
 
    document.getElementById(id).value = lines.join('\n'); 
 
}

<textarea id="MondayAcomp" onKeyDown="if(event.keyCode == 13) return false;" onKeyUp="bulletOnEnter(event, this.id)" onFocus="onfoc(this.id)" onBlur="onFocOff(this.id)"></textarea>

Als weitere Antwort, konvertierte ich den Code jQuery anstelle von einfachen JS zu verwenden, weil Sie Ihre Frage mit jQuery markiert.

$('#MondayAcomp').on({ 
 
    focus: function() { 
 
     if($(this).val() == '') { 
 
      $(this).val($(this).val() + '• '); 
 
     } 
 
    }, 
 
    blur: function() { 
 
     if($(this).val() == '• ') { 
 
      $(this).val(''); 
 
     } 
 
    }, 
 
    keydown: function(e) { 
 
     if(e.keyCode == 13) { 
 
      e.preventDefault(); 
 
     } 
 
    }, 
 
    keyup: function(e) { 
 
     var element = $(this), 
 
      value = element.val(); 
 

 
     // handle 'return' key 
 
     if(e.keyCode == 13 && value.substr(-2) != '• ') { 
 
      e.preventDefault(); 
 
      element.val((value += '\n• ')); 
 
     } 
 

 
     // remove possible last empty line 
 
     if(value.substr(-1) == '\n') { 
 
      element.val((value = value.substring(0, value.length - 1))); 
 
     } 
 

 
     // check if each line starts with a bullet 
 
     var lines = element.val().split('\n') 
 
     for(var i = 0, l = lines.length; i < l; i++) { 
 
      if(lines[i].substr(0, 1) !== '•') { 
 
       lines[i] = '•' + lines[i]; 
 
      } 
 
     } 
 
     element.val(lines.join('\n')); 
 
    } 
 
});

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