针对退格的textarea的Keypress事件

时间:2014-07-24 04:19:33

标签: php jquery events textarea keypress

在我的项目中,我正在显示textarea的剩余字符长度,以便在textarea上的用户类型的范围内添加评论。

以下是按键事件:

$('#reviewtxt').keypress(function(){

            if($('#reviewtxt').val().length > 1000){
                return false;
            }
            if($.trim($('#reviewtxt').val()) != "")
            {
                $("#reviewremaining").html("Remaining Characters : " +(1000 - $('#reviewtxt').val().length));
            }
        });

textarea的HTML代码

$data = array(
        'name'        => 'reviewtxt',
        'id'          => 'reviewtxt',
        'value'       => '',
        'rows'        => '10',
        'cols'        => '50',
        'style'       => 'border-radius:3px;border:1px solid rgba(75,156,255,1);margin-top:10px;',
        'placeholder'   => lang('type_here').' (Press Enter key to send your review) ',
        'onkeypress'    => 'submitreview(\''.base_url().'\',\''.$pgmresult->id.'\',\''.$id.'\',event,\'0\')'
        );
        echo form_textarea($data);?>
        <span id='reviewremaining' style="color:red;font-size: 13px;"></span> 

AJAX:

function submitreview(baseurl,videoid,userid,e,type)
{ 
    $("#reviewremaining").show();
    $("#reviewremaining").html('');
    var reviewtxt=$.trim($("#reviewtxt").val());
    if (e.keyCode == 13 || e.which == 13)
    {
        if(reviewtxt=="")
        { 
            $("#reviewremaining").html('Please enter your review');
            $("#reviewtxt").focus();
            return false;
        }
        else
        { 
            if(reviewtxt.length>1000)
            {
                $("#reviewremaining").html('Review cannot exceed more than 1000 characters');
                $("#reviewtxt").focus();
                return false;
            }
            $.ajax({
                type:"post",
                dataType:"text",
           data:"reviewtxt="+reviewtxt+"&videoid="+videoid+"&userid="+userid+"&type="+type,
                url:baseurl+"video/submitreview",
                success:function(response)
                { 

                }
            });
        }
    }
}

现在的问题是,即使长度超过最大值,我也可以按另一个键。假设最大长度为500个字符,只有当我按下第501个字符时,该函数才会return false,因此我需要删除该字符才能保存评论。此外,我想在单击退格键或删除按钮时显示剩余的字符。

目前,如果我输入300个字符,那么它将显示剩余字符:300,然后如果我复制粘贴其他一些行,则span中的文本仍将保持不变。

如何解决这个问题?任何人都可以帮忙解决这个问题吗?

提前致谢。

2 个答案:

答案 0 :(得分:2)

使用keyup事件并调用相同的函数mouseup

Here is fiddle

$('#reviewtxt').keyup(function()

Updated Fiddle

答案 1 :(得分:1)

问题的第一部分从if($('#reviewtxt').val().length > 1000)更改为if($('#reviewtxt').val().length >= 1000)。如您所见,您需要包含最后一个字符才能返回false。否则它只会在(limit + 1)字符上返回false。