4

最近のほとんどのブラウザには、textarea要素にサイズ変更ハンドルがあります。問題は、訪問から訪問まで、あなたがどこに置いたのかを自動的に覚えていないことです。

この機能でアプリを有効にしたいのですが。これを行うには、テキストエリア要素の高さと幅をlocalStorageアイテムに書き込むために、html5 localStorageオブジェクトとともにjQuery（テキストエリアのサイズ変更を関数にバインドする）を利用することを計画しています。

localStorage書き込みイベントを、テキストエリアのサイズが変更されたことを通知する同等のjQueryイベントにバインドする必要があります。

関数をバインドするための関連するjQueryメソッドは何ですか？

4

2 に答える 2

2

ウィンドウのサイズ変更イベントにのみバインドでき、テキストエリアにはバインドできません。サイズをリッスンするポーリング関数を作成し、サイズが変更された場合は更新する必要があります。

このようなもの：

var checkSize = setInterval(function(){ 
    var $text = $('#myTextArea');
    if (localStorage && localStorage.myTextAreaWidth) {
        if ($text.width() != localStorage.myTextAreaWidth) {
            localStorage.myTextAreaWidth  = $text.width();
        }
        if ($text.height() != localStorage.myTextAreaHeight) {
            localStorage.myTextAreaHeight = $text.height();
        }
    } else {
        localStorage.myTextAreaWidth  = $text.width();
        localStorage.myTextAreaHeight = $text.height();
    }
}, 1000);

$(function(){
    var $text = $('#myTextArea');
    if (localStorage && localStorage.myTextAreaWidth) {
        $text.css({
            width  : localStorage.myTextAreaWidth  + 'px',
            height : localStorage.myTextAreaHeight + 'px'
        });
    } 
});

これがデモです：http ： //jsfiddle.net/TDKpr/

フィドルのサイズを変更し、タブを閉じ、新しいタブを開き、フィドルに再度アクセスすると、テキストエリアが前回選択したサイズを維持していることがわかります。

于 2013-02-28T05:21:22.097 に答える
1

localStorageを使用したい場合、これはあなたに役立つかもしれません：

html

<textarea class="rz" id="txt_id_1" cols="40" rows="5">resize test</textarea>

jquery

$(document).ready(function(){
//on load set the default or history size
var track_ta='txt_id_1';

initSize();

function initSize(){
   var ta_size=localStorage.getItem(track_ta);
   //default size
   if(ta_size==null) ta_size={width:'200px', height:'50px'};
   else ta_size=JSON.parse(ta_size);
   $('#'+track_ta).css(ta_size);
}

//keep the latest in the local storage
$("textarea.rz").resizable({
    resize: function() {  
       var sizeHistory=JSON.stringify({width:this.style.width,height:this.style.height});
       localStorage.setItem(track_ta,sizeHistory);
    }
});
});

作業デモhttp://jsfiddle.net/PPZEK/、ページのサイズを変更してリロードするだけです。

すべてのテキストエリアの概念を一般化できます。textareaのデフォルトのresize-handlerはreisizeイベントを提供しないので、明らかにjqueryresizeを使用する必要があります。

于 2013-02-28T06:38:11.517 に答える