jQ Auto Grow Text Area 问题 - 延迟扩展和填充问题

Question

我已经在 iPhone 我的网络应用程序中实现了一个标准的 jQuery 自动增长/扩展文本区域插件。除了两个问题（如下所列）外，它运行良好。首先，请允许我强调一下，我已经尝试使用谷歌搜索并尝试了不同的教程，并得出结论，这是最适合我需要的教程。

问题 1. 延迟扩展 textarea onKeyUp。如何？函数expand是在keyup上调用的：

 $(this).keyup(update);

由于我使用 CSS3 动画 (-webkit-transition) 为扩展设置动画，并且由于站点/“应用程序”是为 iPhone 构建的，因此我需要将此操作延迟 500 毫秒，以便打字不会因为以下原因而延迟那。我在代码的不同部分尝试了不同的解决方案，例如 setTimeOut，甚至是延迟等，但它不起作用。期间。

问题 2：textarea 上的内边距会导致它有些随机地扩展，并且是应有的两倍。

 padding:10px 10px;

这是一个已知问题 - 我知道，但到目前为止，似乎知道人们还没有弄清楚如何正确处理它。删除填充使一切正常。在不建议我使用其他插件或只是删除填充的情况下，如何更改代码以使其与填充一起使用？

处理扩展的 JS 代码：

 (function($) {

/*
 * Auto-growing textareas; technique ripped from Facebook
 */
$.fn.autogrow = function(options) {

    this.filter('textarea').each(function() {

        var $this       = $(this),
            minHeight   = $this.height(),
            lineHeight  = $this.css('lineHeight');

        var shadow = $('<div></div>').css({
            position:   'absolute',
            top:        -10000,
            left:       -10000,
            width:      $(this).width(),
            fontSize:   $this.css('fontSize'),
            fontFamily: $this.css('fontFamily'),
            lineHeight: $this.css('lineHeight'),
            resize:     'none'
        }).appendTo(document.body);

        var update = function() {

            var val = this.value.replace(/</g, '&lt;')
                                .replace(/>/g, '&gt;')
                                .replace(/&/g, '&amp;')
                                .replace(/\n/g, '<br/>');

            shadow.html(val);

            $(this).css('height', Math.max(shadow.height() + 15, minHeight));
            $("#guestInfoNameLable").css('height', Math.max(shadow.height() + 15, minHeight));
        }

         var fix = function() {

            var val = this.value.replace(/</g, '&lt;')
                                .replace(/>/g, '&gt;')
                                .replace(/&/g, '&amp;')
                                .replace(/\n/g, '<br/>');

            shadow.html(val);
            $(this).css('height', minHeight);
            $("#guestInfoNameLable").css('height', minHeight);
        }

        $(this).keyup(update);
        $(this).change(fix);
        //$(this).change(update).keyup(update).keydown(update);

        update.apply(this);

    });

    return this;

}

})(jQuery);

HTML 表单：

 <div class="guestInfoLabel" id="guestInfoNameLable">guest</div>
 <textarea id="guestInfoName" autocomplete="off" autocorrect="off"></textarea>

Answer 1

我最终编写了自己的“插件” - 10 行！ *这里适用于所有寻找简单、轻量级插件的人，该插件适用于元素填充和大多数输入类型。 它可能不是完美无缺的，但它确实有效。

工作原理： OnKeyUp，函数 getInputStr 被调用，该函数设置超时并调用处理扩展的函数：expandElement。此函数计算 \n 的数量，即换行符，并为每个换行符将 textarea 扩展/收缩 20 px。如果 textarea 包含超过 8 个换行符，它将停止扩展 (maxHeight)。我在 textArea 上添加了 CSS3 动画以使扩展运行更顺畅，但这当然是完全可选的。这是代码：

  -webkit-transition: height 0.6s;
  -webkit-transition-timing-function: height 0.6s;

第 1 部分：文本区域 (HTML)

  <textarea id="guestInfoName" autocomplete="off" autocorrect="off" onKeyUp="getInputStr(this.value)" onBlur="resetElHeight()" onFocus="expandElement(this.value)"></textarea>

第 2 部分 （可选）：设置超时 - 避免文本区域在仍在输入时扩展。 (Javascript)

//global variables
var timerActivated = false;
var timeOutVariable = "";

function getInputStr(typedStr) {

//call auto expand on delay (350 ms)

if(timerActivated){
    clearTimeout(timeOutVariable);
    //call textarea expand function only if input contains line break
    if((typedStr.indexOf("\n") != -1)) {
        timeOutVariable=setTimeout(function() { expandTxtArea(typedStr); },350);
    }
}
else {
    if((typedStr.indexOf("\n") != -1)) {
        timeOutVariable=setTimeout(function() { expandTxtArea(typedStr); },350);
        timerActivated = true;
    }
}
//auto grow txtArea 
}

第 3 部分：扩展文本区域（Javascript）

function expandTxtArea(typedStr) {
var nrOfBrs = (typedStr.split("\n").length - 1);
var txtArea = $("#guestInfoName");
var label = $("#guestInfoNameLable");
var newHeight = (20 * (nrOfBrs+1));

//console.log("nr of line breaks: " + nrOfBrs); console.log("new height: " + newHeight);

//setting maxheight to 8 BRs
if(nrOfBrs < 9) {
    txtArea.css("height", newHeight); 
    label.css("height",newHeight);
} else {
    txtArea.css("height", 180); 
    label.css("height",180);
}

}

就是这样，伙计们。希望这可以帮助有类似问题的人！