TEXTAREA高度变化后,刷新页面保存拉伸后的高度
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <base target="_blank" /> <title>TEXTAREA高度变化后,刷新页面保存拉伸后的高度 - 三十客</title> <style> .container { width : 100%; } .texta { width : 28em; height : 4em; font-size : 1.5em; } </style> </head> <body> <div class="container"> <textarea class="texta" id="my-textarea" onresize="saveIt">TEXTAREA上下拉伸高度后,页面刷新,怎么保存拉伸后的高度 </textarea> </div> <div style="padding-top:2em;"> <a href="https://segmentfault.com/q/1010000015400279">思否问题链接</a> </div> <script type="text/javascript" src="http://res.42du.cn/vendor/jquery/jquery.min.js"></script> <script> $(document).ready(function () { var $texta = $('#my-textarea'); var lastWidth = localStorage.getItem("my-area-width"); var lastHeight = localStorage.getItem("my-area-height"); if(lastWidth && lastHeight) { $texta.css("width",lastWidth+"px"); $texta.css("height",lastHeight+"px"); } $texta.data('x', $texta.outerWidth()); $texta.data('y', $texta.outerHeight()); $texta.mouseup(function () { var $this = $(this); var width = $this.outerWidth(); var height = $this.outerHeight(); if (width != $this.data('x') || height != $this.data('y')) { alert(width + ' - ' + $this.data('x') + '\n' + height + ' - ' + $this.data('y')); localStorage.setItem("my-area-width",width); localStorage.setItem("my-area-height",height); } $this.data('x', width); $this.data('y', height); }); }); </script> </body> </html>