I need help to remove text area in certain conditions

Question

I have text area controls on my page, and I had code so that when a user clicks on a text area or presses the 'ENTER' key, this time a list of markers in the text area will be created. But the problem is that if the user clicks on the text area and it creates a bullet list, but if the user does not type anything in the text area, then it should be empty and the bullet should be deleted. In a simple way, the pool of the text area should be deleted if there is no data in it. And one more thing - to prohibit the user to remove the bullet from the text area.

here is my 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 Functions:

 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

• This is not .empty , this is .value = ""; .
• For keyCode you need to pass the event parameter to your callback function.
• You can prevent the addition of blank lines by also checking the last line in the return callback.
• The only way I can take an image to prevent the bullet from being deleted is to loop at the end and check each line.

 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> 

As an additional answer, I converted the code to use jQuery instead of plain JS because you marked your question with 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>