I need help to empty text area on particular conditions

Question

I have text area controls in my page and I had code it such way that when user click on text area or hit 'ENTER' key that time it will create bullet-list in text area. But problem is that if user click on text area and it will create bullet-list but if user does not type anything in text area then it should get empty and bullet should be removed. In simple way text area bullet-list should get removed if it has no data in it. And one more thing is to prevent user deleting bullet from 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

1. It is not .empty, it is .value = "";.
2. For the keyCode you need to pass event parameter to your callback function too.
3. You can prevent adding empty lines, by checking the last line in your return key callback too.
4. Only way I can imageine, to prevent deleting the bullets, is a loop at the end and check each line start.

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 additional answer, I converted the code to use jQuery instead of plain JS, because you tagged 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>