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

我已经在iPhone我的网络应用程序中实现了标准的jQuery自动增长/扩展textarea插件。 除了两个问题（下面列出）之外，它工作正常。 首先，请允许我强调，我已经尝试使用Google搜索并尝试了不同的教程，并得出结论，这是最符合我需求的。

问题1.延迟textarea onKeyUp的扩展。 怎么样？ 在keyup上调用函数expand：

$(this).keyup(update); 

由于我正在使用CSS3动画（-webkit-transition）来为扩展设置动画，并且因为网站/“app”是为iPhone构建的，所以我需要将此操作延迟500毫秒，以便输入不会因此而滞后。 我在代码的不同部分尝试了不同的解决方案，如setTimeOut，甚至延迟等，但它不起作用。 期。

问题2：文本区域上的填充使其随机扩展并且应该增加两倍。

  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 = $('
').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, '>') .replace(/&/g, '&') .replace(/\n/g, '
'); 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, '>') .replace(/&/g, '&') .replace(/\n/g, '
'); 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表单：

  
guest
  

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部分： textarea（HTML）

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

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