jQ Auto Grow Text Area问题-延迟扩展&填充问题 [英] jQ Auto Grow Text Area issues - Delaying expansion & padding issue
问题描述
我已经在 iPhone我的网络应用中实现了标准的jQuery自动增长/扩展textarea插件.除以下两个问题((在下面列出))之外，它都工作正常.首先，请允许我强调，我尝试了Google搜索并尝试了不同的教程，并得出结论，这是最适合我的需求.
I've implemented a standard jQuery auto grow/expand textarea plugin into iPhone my web app. It's working fine except for two issues (listed below). Firstly, allow me to stress that I've tried googled and experimented with different tutorial and come to the conclusion that this is the best one for my needs.
问题1.延迟onKeyUp上textarea的扩展. 如何在键盘上调用功能展开:
Issue 1. Delaying expansion of textarea onKeyUp. How? The function expand is called on keyup:
$(this).keyup(update);
由于我正在使用CSS3动画(-webkit-transition)进行扩展动画，并且由于网站/应用"是为iPhone制作的，因此我需要将这一操作延迟500毫秒，以便输入不会滞后于那.我已经在代码的不同部分尝试了不同的解决方案，例如setTimeOut，甚至是Delay等，但是它不起作用.期间.
Since i'm using CSS3 animation (-webkit-transition) to animate the expansion and since the site/"app" is built for iPhones, i need to delay this action by say 500 ms so that typing wont lag because of that. I've tried different solutions like setTimeOut in different parts of the code, even Delay, etc but it does not work. period.
问题2:在文本区域上进行填充会使其随机扩展一些，并且是其应有扩展的两倍.
padding:10px 10px;
这是一个已知问题-我知道，但到目前为止，似乎好像已经知道一个人如何正确处理它.删除填充使一切正常.在不建议我使用其他插件或只是删除填充的情况下，如何更改代码以使其与填充一起使用?
It is a known issue - I know, but so far it seems as if know one has yet figured out how to properly deal with it. Removing the padding makes everything work fine. Without suggesting me to use another plugin or simply to remove the padding, how can alter the code to make it work with padding?
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, '<')
.replace(/>/g, '>')
.replace(/&/g, '&')
.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, '<')
.replace(/>/g, '>')
.replace(/&/g, '&')
.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>
推荐答案
我最终用10行编写了自己的插件" ！ *这里适合所有正在寻找一个简单，轻巧的插件的人，该插件可用于元素填充和大多数输入类型. 它可能并非完美无缺，但确实可以.
I ended up writing my own "plugin" - in 10 lines! *Here's for everyone searching for a simple, lightweight plugin that works with element padding and most input types. It may not be flawless but it sure works.
工作原理: 在OnKeyUp中，调用函数 getInputStr 来设置超时并调用处理指数的函数: expandElement .此函数计算\ n(即换行符)的数量，并为每个换行符以20 px扩展/收缩文本区域.如果textarea包含8个以上的换行符，它将停止扩展(maxHeight.)我在textArea上添加了CSS3动画，以使扩展运行更加平稳，但这当然是完全可选的.这是该代码:
How it works: OnKeyUp, function getInputStr is called which sets a time out and calls the function handling the expantion: expandElement. This function counts the number of \n, line breaks that is, and expands/contracts the textarea with 20 px for each line break. If the textarea contains more than 8 line breaks, it stops expanding (maxHeight.) I've added CSS3 animation on the textArea to make the expansion run more smoothly, but that is of course entirely optional. Here's code for that:
-webkit-transition: height 0.6s;
-webkit-transition-timing-function: height 0.6s;
第1部分:文本区域(HTML)
Part 1: the textarea (HTML)
<textarea id="guestInfoName" autocomplete="off" autocorrect="off" onKeyUp="getInputStr(this.value)" onBlur="resetElHeight()" onFocus="expandElement(this.value)"></textarea>
第2部分 (可选):设置超时时间-避免在继续键入文本时扩展文本区域. (JavaScript)
Part 2 (optional): Set time out - to avoid textarea to expand while still typing. (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)
Part 3: Expand text area (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);
}
}
就是这样.希望这对遇到类似问题的人有所帮助！
That's it folks. Hope this helps someone with a similar problem!
这篇关于jQ Auto Grow Text Area问题-延迟扩展&填充问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
