javascript - 防止只有 <br> 的文本区域提交

Question

我正在尝试构建一个评论部分，允许在前端进行即时预览。

除了提交评论后的行为之外，一切正常。

在我的代码中，当用户在文本区域中按 Enter 键时，我触发评论的提交，然后通过重置值来清除文本区域。

但是，即使我通过声明 e.preventDefault() 禁用了 Enter 键的默认行为，重复按 Enter 时仍然会插入新行。

此外，即使我在提交之前检查了文本区域值的长度，我的代码也只接受
/'\n' 作为有效内容的注释，因此用户将能够提交“空”如果他们在文本区域中多次按 Enter 键，则发表评论...

请帮忙，我想不出解决方案，我正在考虑添加一个帖子按钮，用户必须手动单击它才能提交...

我的 fiddle 代码:

http://jsfiddle.net/8ve0gLab/2/

我的代码:

$(document).ready(function(){
    $('#comment-input').keydown(function(e){
        var commentContent = $(this).val()
        if (e.which == 13) {e.preventDefault()}
        if (e.which == 13) {
            e.preventDefault()
            if (commentContent.length != 0) {
            $('#comment').append(commentContent)
            $(this).val('') 
        }

        else {
            alert('Comment is empty')} /*This line is not working properly*/
        }       
    })
})

Answer 1

尝试将代码更改为

$(document).ready(function(){
    $('#comment-input').keydown(function(e){
        var commentContent = $(this).val();
        if (e.which == 13) {
            if (commentContent.trim()){
                $('#container').append("<p>"+commentContent+"</p>");
                $(this).val('');
            }
            else {alert('Area is empty');}
        }        
    })
})

注意“.trim()”，它是一个 JavaScript 字符串方法。

你可以在 jsfiddle 中尝试:http://jsfiddle.net/xdxqwLof/