Question

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

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

 $(this).keyup(update);

由于我正在使用CSS3动画（-webkit-transition）来为扩展设置动画，并且因为网站/“app”是为iPhone构建的，所以我需要将此操作延迟500 ms，以便输入不会因为那。我在代码的不同部分尝试了不同的解决方案，如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部分： 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);
}

}

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

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

1 个答案: