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

不是.empty，而是.value = "";。
对于keyCode，您还需要将event参数传递给回调函数。
您也可以通过检查return键回调中的最后一行来阻止添加空行。
只有这样我才能想象，为了防止删除子弹，最后是一个循环并检查每一行的开始。

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>

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

1 个答案: