我需要帮助在特定条件下清空文本区域

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.

我的页面中有文本区域控件，我的编码方式是当用户单击文本区域或按“ENTER”键时，它将在文本区域中创建项目符号列表。但问题是，如果用户点击文本区域并且它将创建子弹列表，但如果用户没有在文本区域中键入任何内容，那么它应该为空并且应该删除子弹。简单来说，如果文本区域子弹列表中没有数据，则应删除它。还有一件事是阻止用户从文本区域删除子弹。

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:

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

jsfiddle在这里

1 个解决方案

#1

1. It is not .empty, it is .value = "";.
2. 它不是.empty，它是.value =“”;。
3. For the keyCode you need to pass event parameter to your callback function too.
4. 对于keyCode，您还需要将事件参数传递给回调函数。
5. You can prevent adding empty lines, by checking the last line in your return key callback too.
6. 您也可以通过检查返回键回调中的最后一行来阻止添加空行。
7. Only way I can imageine, to prevent deleting the bullets, is a loop at the end and check each line start.
8. 只有这样我可以想象，以防止删除项目符号，最后是一个循环并检查每一行开始。

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.

作为额外的答案，我将代码转换为使用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>