我需要幫助來清空特定條件下的文本區域

Question

我在我的頁面中有文本區域控件，並且有代碼，當用戶點擊文本區域或點擊「回車」鍵時，它將創建項目符號列表文本區域。但問題是，如果用戶點擊文本區域，它會創建項目符號列表，但如果用戶沒有在文本區域輸入任何內容，那麼它應該是空的，子彈應該被刪除。簡單地說，如果文本區域項目符號列表中沒有數據，它應該被刪除。 還有一件事是防止用戶從文本區域刪除子彈。

這裏是我的代碼：

<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函數：

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. 這不是.empty，它是.value = "";。
2. 對於keyCode，您需要將event參數也傳遞給您的回調函數。
3. 您也可以通過檢查return鍵回調中的最後一行來防止添加空行。
4. 唯一的方法，我可以imageine，以防止刪除子彈，是一個循環在最後，並檢查每一行的開始。

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>

隨着更多的答案，我轉換的代碼使用jQuery而不是純JS的，因爲你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>