Potrzebuję pomocy w pustym polu tekstowym na konkretnych warunkach

Question

Mam kontrolę obszaru tekstowego na mojej stronie i miałem kod taki, że gdy użytkownik kliknie na obszarze tekstowym lub uderzy klawiszem 'ENTER', tym razem utworzy listę punktowaną w obszar tekstowy. Problem polega jednak na tym, że jeśli użytkownik kliknie na pole tekstowe, utworzy listę wypunktowaną, ale jeśli użytkownik nie wpisuje niczego w polu tekstowym, powinien on zostać pusty, a punktor powinien zostać usunięty. W prosty sposób lista obszarów tekstowych powinna zostać usunięta, jeśli nie ma w niej żadnych danych. Jeszcze jedno, aby uniemożliwić użytkownikowi usuwanie punktora z obszaru tekstowego.

tutaj jest mój kod:

<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> 

funkcje javascript:

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. Nie .empty to, że jest .value = "";.
2. Dla parametru keyCode należy również przekazać parametr event do funkcji zwrotnej.
3. Możesz zapobiec dodawaniu pustych linii, sprawdzając także ostatni wiersz w twoim oddzwonieniu na numer return.
4. Jedyny sposób, w jaki mogę zobrazować, aby zapobiec usunięciu pocisków, to pętla na końcu i sprawdzić każdy początek linii.

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>

Jako dodatkowy odpowiedź, ja konwertowane kodu użyć jQuery zamiast zwykłego JS, ponieważ określili swoje pytanie z jQuery.

$('#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>