0

テキスト領域を拡張する単純なクロス ブラウザを構築しようとしたときに、すべてのプラグインの継ぎ目が過度に雑然としていることに気付きました。

私はこれを開発しました：

$(document).ready(function() {
    $('textarea').keyup(function() {
        var txtheight = this.scrollHeight;
        $(this).height(txtheight)
    });
    $('textarea').keyup();
});​

予想外の結果を生み出しています。

FIREFOX では動作していますが、テキストエリアから行を削除してもサイズが小さくなりません。

CHROME では、任意のキーを押すと、別の行の高さが追加されます。

代わりにコードを次のように変更すると、これは非常に紛らわしいです。

$(document).ready(function() {
    $('textarea').keyup(function() {
        var txtheight = this.scrollHeight;
       alert(txtheight); 
    });
    $('textarea').keyup();
});​

アラートは、両方のブラウザで毎回正しい数を取得します。一体何が起こっているのですか？

4

3 に答える 3

3

うまくいくと思われるアプローチの1つを次に示します。

​$('#test').on('keydown', function(e){
    var that = $(this);
    if (that.scrollTop()) {
        $(this).height(function(i,h){
            return h + 20;
        });
    }
});​​​​​​​​

JS フィドルのデモ。

少し複雑な方法で上記を修正しましたが、適切な精度であると思います。

function heightComparison(el) {
    if (!el) {
        return false;
    }
    else {
        var $el = $(el),
            clone = $('#' + el.id + '-clone'),
            cH = clone.height();

        $el.height(cH);

    }
}

$('#test').on('keyup paste', function(e) {
    var that = this,
        $that = $(that),
        clone = $('#' + that.id + '-clone').length ? $('#' + that.id + '-clone') : $('<div />', {
            'id': that.id + '-clone'
        }).css({
            'position': 'absolute',
            'left': '-1000px',
            'border-width': '1px',
            'border-color': '#000',
            'border-style': 'solid',
            'overflow': 'hidden',
            'width': $that.width(),
            'min-height': $that.height(),
            'padding': $that.css('padding'),
            'font-size': $that.css('font-size'),
            'font-family': $that.css('font-family')
        }).appendTo('body');

    clone.text($that.val());

    heightComparison(that);
});​

JS フィドルのデモ。

于 2012-09-04T18:04:05.603 に答える
2

これはうまくいきませんか：

$(document).ready(function() {
    $('textarea').keyup(function() {
       var txtheight = $(this).scrollTop();
       $(this).css('height',($(this).height() + txtheight) + 'px')
    });
    $('textarea').keyup();
});

シンプルで効果的なソリューション。

于 2012-09-04T18:38:42.813 に答える
0

スレッドに答えるには遅すぎることはわかっていますが、十分に準備された解決策が得られます:)

2 つのイベントをバインドしただけtextareaです。

$('textarea').keypress(function (e) {
  // check if user pressed 'Enter'
  if(e.which == 13) 
  {
   // get control object to modify further
   var control = e.target;

    // get existing 'Height' of pressed control
   var controlHeight = $(control).height();

   //add some height to existing height of control, I chose 17 as my line-height was 17 for the control 
   $(control).height(controlHeight+17);
  }
});

$('textarea').blur(function (e) {

    // Here we get exact number of lines in our TextArea
    var textLines = $(this).val().trim().split(/\r*\n/).length; 

    // Now apply the number Of Lines * line-height to your control. That's all.
    $(this).val($(this).val().trim()).height(textLines*17);
});

コンテンツを追加しながらテキストボックスを拡大し、末尾の余分な空白も削除します。例をチェックして、フィドル

于 2013-03-04T09:54:14.570 に答える