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

Question

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

这是我的代码:

<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在这里

Answer 1

1. .empty事实并非如此.value = "";.
2. 因为keyCode你需要将event参数传递给你的回调函数.
3. 您也可以通过检查return密钥回调中的最后一行来阻止添加空行.
4. 只有这样我可以想象,以防止删除项目符号,最后是一个循环并检查每一行开始.

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>