Question

大多数现代浏览器都在textarea元素上调整大小句柄。问题是他们不会自动记住你离开他们访问的地方。

我想使用此功能启用我的应用。为此，我计划利用jQuery（将textarea resize绑定到函数）以及html5 localStorage对象，以便将textarea元素的高度和宽度写入localStorage项目。

我需要将localStorage写事件绑定到等效的jQuery事件，该事件表示textarea已经调整大小。

将函数绑定到哪个相关的jQuery方法？

Answer 1

你只能绑定到窗口的resize事件，而不是textarea的事件。您需要做的是创建一个轮询函数来监听大小，如果它发生变化，则更新。

这样的事情：

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/

你可以通过调整小提琴，关闭标签，打开一个新标签，重新访问小提琴以及textarea维持你上次选择的大小来看到它的工作。

Answer 2

如果您想使用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的概念。我看到textarea的默认resize-handler没有提供任何reisize事件，显然我们必须使用jquery resize。

如何通过jQuery和localStorage保存textarea的大小调整状态

2 个答案:

HTML

jquery的