-1

嗨，朋友们，我想制作可编辑的 div，当文本达到 div 的定义高度时，用户可以在其中输入文本，然后当用户继续输入文本并再次达到定义的高度时，字体大小会减小，14px然后会出现一个警报，上面会说'停止输入'并且用户无法输入，除非他删除了 div 中的一些文本....我知道这个故事太长了，但我知道我可以在这里毫无疑问地得到答案http://jsfiddle.net/JW4Qt/3/

脚本

$('.divContent').keydown(function(e){

        var heigh = $(this).height();
        if (($(this).height()) > 200)
        {   
        var font = $('.divContent').css('font-size');
        font = parseInt(font);

        $(this).css('font-size',''+font - 2+'px')

        if(($(this).css('font-size')) <= '14px' && heigh > 200)
        {
            $(this).css('font-size','14px')
            font = 14;

            /*alert('stop')*/

            }

            }
        })

HTML

<div class="divContent"  contenteditable="true" autocomplete="off">
    Start typing here</div>

提前谢谢你们.. :)

4

1 回答 1

2

您需要将两个 if 条件分开，并在您的第一个 if 条件中传递另一个条件。

$('.divContent').keydown(function(e){

    var heigh = $(this).height();
    if (($(this).height()) > 200 && $(this).css('font-size') >= '16px')
    {   
        var font = $('.divContent').css('font-size');
        font = parseInt(font);

        $(this).css('font-size',(font - 2) + 'px')
    }

    if(($(this).css('font-size')) <= '14px' && heigh > 230)
    {
        $("span").html("<b style='color:#f00'>STOP TYPING...</b>" );
        $(this).css('font-size','14px')
        font = 14;
        if(e.keyCode==8)
        {
         $("span").html("<b style='color:#0f0'>START TYPING...</b>" );
         return true;
        }
        else
        {
         return false;      
        }
    }


})

看到这个小提琴演示

于 2013-09-05T10:45:11.747 回答