jQ自动增长文本区域问题 - 延迟扩展和填充问题

Question

我已经实现了一个标准的jQuery自动增长/扩展textarea插入到iPhone我的web应用。它工作正常，除了两个问题（下面列出）。首先，请允许我强调我已经尝试过使用Google搜索并尝试使用不同的教程，并得出这样的结论，即这是对我的需求最好的一个。

问题1.延迟textarea onKeyUp的扩展。怎么样？功能拓展上称为KEYUP：

$(this).keyup(update); 

由于我使用CSS3动画（-webkit-过渡），以动画的扩展和自网站/“应用程序”是专为iPhone手机，我需要延迟这个动作说500毫秒，这样打字就不会因为这个而滞后。我已经尝试了不同的解决方案，如setTimeOut在代码的不同部分，甚至延迟等，但它不起作用。期。

问题2：textarea上的填充会导致它随机扩展，并且应该是它的两倍。

padding:10px 10px; 

这是一个已知的问题 - 我知道，但到目前为止，它好像知道的人还没有想出如何正确处理它。删除填充使一切工作正常。没有建议我使用另一个插件或只是删除填充，如何更改代码以使其可以使用填充？

JS代码HANDELING扩张：

(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叫其出去设置一个时间，调用函数处理expantion：expandElement。这个函数计算\ n的换行次数，换句话说，对于每个换行符，用20px扩展/缩小textarea。如果textarea包含超过8个换行符，它将停止扩展（maxHeight）。我在textArea上添加了CSS3动画，以使扩展运行更加顺畅，但这当然是完全可选的。这里的代码为：

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

第1部分： textarea的（HTML）

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

第2部分（可选）：设置超时 - 避免textarea的扩大同时仍然打字。（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); 
} 

} 

这就是它的乡亲。希望这可以帮助有类似问题的人！