0

標準のjQuery自動拡張/拡張textareaプラグインをiPhoneのWebアプリに実装しました。2つの問題（以下にリスト）を除いて、正常に動作しています。まず、私がgoogledを試し、さまざまなチュートリアルを試したことを強調し、これが私のニーズに最適であるという結論に達しました。

問題1.テキストエリアonKeyUpの拡張を遅らせます。どのように？キーアップ時に関数expandが呼び出されます。

 $(this).keyup(update);

CSS3アニメーション（-webkit-transition）を使用して拡張をアニメーション化し、site / "app"はiPhone用に構築されているため、このアクションをたとえば500ミリ秒遅らせて、入力が遅れないようにする必要があります。コードのさまざまな部分でsetTimeOutなどのさまざまなソリューションを試しましたが、Delayなどは機能しません。限目。

問題2：テキストエリアをパディングすると、テキストエリアがややランダムに拡張され、必要な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 = $('<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>
4

1 に答える 1

0

私は自分の「プラグイン」を10行で書くことになりました！*これは、要素のパディングとほとんどの入力タイプで機能するシンプルで軽量なプラグインを探しているすべての人のためのものです。完璧ではないかもしれませんが、確かに機能します。

仕組み： OnKeyUp、関数getInputStrが呼び出され、タイムアウトが設定され、拡張を処理する関数expandElementが呼び出されます。この関数は、\ nの改行数をカウントし、改行ごとに20ピクセルでテキストエリアを拡大/縮小します。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 （オプション）：タイムアウトを設定します-入力中に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);
}

}

それは人々です。これが同様の問題を抱えている人に役立つことを願っています！

于 2012-05-31T22:44:02.553 に答える