Question

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

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

在我的代码中，当用户按下textarea中的Enter键时触发注释的提交，然后通过重置值清除textarea。

但是，即使在通过声明e.preventDefault（）禁用了回车键的默认行为后，仍然会在重复按Enter时插入新行。

此外，即使我在提交之前检查textarea的值的长度，我的代码接受只有/'\ n'作为有效内容的评论，因此用户将能够提交'空'如果他们多次按下在textarea中的输入，请发表评论...

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

我的小提琴代码：

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');}
        }        
    })
})

注意＆＃34; .trim（）＆＃34;这是一个javascript字符串方法。

你可以在这里尝试jsfiddle：http://jsfiddle.net/xdxqwLof/

Answer 2

这可能会解决您的问题：

if (event.keyCode == 10 || event.keyCode == 13){ 
    event.preventDefault();
}

<强> JS Fiddle Demo

防止textarea只有提交

2 个答案: