文本框大小的控制

文本框大小控制，这里用到一个插件flexText，可以去GitHub上面找到，下面将源码拿过来了。

//jquery.flexText.js
/*
    此插件textarea的高度是 height:100%; 继承父元素的高度 ==> 父元素只有一个 position:relative; 用于定位textarea
    页面中加载完毕又添加了pre标签，pre标签是以块元素存在的并且不可见，但是占用空间，
    不像display:none;什么空间也不占。
    所以textarea父元素的高度是通过pre撑开的(在textarea里面写入文字，文字会被添加到pre底下的span标签里，以此来撑开pre的高度)

    要改变textarea初始化时的高度，只需改变pre的padding值即可，页面加载时pre里面添加<br />标签是为了让pre标签初始时有个高度
 */
;(function ($) {

    // Constructor
    function FT(elem) {
        this.$textarea = $(elem);

        this._init();
    }

    FT.prototype = {
        _init: function () {
            var _this = this;

            // Insert wrapper elem & pre/span for textarea mirroring
            this.$textarea.wrap('<div class="flex-text-wrap" />').before('<pre class="pre"><span /><br /></pre>');

            this.$span = this.$textarea.prev().find('span');

            // Add input event listeners
            // * input for modern browsers
            // * propertychange for IE 7 & 8
            // * keyup for IE >= 9: catches keyboard-triggered undos/cuts/deletes
            // * change for IE >= 9: catches mouse-triggered undos/cuts/deletions (when textarea loses focus)
            this.$textarea.on('input propertychange keyup change', function () {
                _this._mirror();
            });

            // jQuery val() strips carriage return chars by default (see http://api.jquery.com/val/)
            // This causes issues in IE7, but a valHook can be used to preserve these chars
            $.valHooks.textarea = {
                get: function (elem) {
                    return elem.value.replace(/\r?\n/g, "\r\n");
                }
            };

            // Mirror contents once on init
            this._mirror();
        }

        // Mirror pre/span & textarea contents
        ,_mirror: function () {
            this.$span.text(this.$textarea.val());
        }
    };

    // jQuery plugin wrapper
    $.fn.flexText = function () {
        return this.each(function () {
            // Check if already instantiated on this elem
            if (!$.data(this, 'flexText')) {
                // Instantiate & store elem + string
                $.data(this, 'flexText', new FT(this));
            }
        });
    };

})(jQuery);

其css文件

//style.css
pre {
    white-space: pre;
    white-space: pre-wrap;
    word-wrap: break-word;
}
.flex-text-wrap {
    width: 100%;
    position: relative;
    *zoom: 1;
}
textarea,
.flex-text-wrap {
    outline: 0;
    margin: 0;
    border: none;
    padding: 0;
    *padding-bottom: 0!important;
}
.flex-text-wrap textarea,
.flex-text-wrap pre {
    *white-space: pre;
    *word-wrap: break-word;
    white-space: pre-wrap;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}
.flex-text-wrap textarea {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    resize: none;
    /* IE7 box-sizing fudge factor */
    *height: 94%;
    *width: 94%;
}
.flex-text-wrap pre {
    display: block;
    visibility: hidden;
}
.flex-text-wrap,
textarea { margin-bottom: 25px }
textarea,
.flex-text-wrap pre {
    line-height: 1.7;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 100%;
    padding: 10px 15px;
    border: 1px solid #c6c8ce;
    width: 100%;
    -webkit-appearance: none;
    background: #fff;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    -webkit-box-shadow: 0 0 8px rgba(182, 195, 214, .6) inset, 0 1px 1px #fff;
    -moz-box-shadow: 0 0 8px rgba(182, 195, 214, .6) inset, 0 1px 1px #fff;
    box-shadow: 0 0 8px rgba(182, 195, 214, .6) inset, 0 1px 1px #fff;
    -webkit-transition-duration: 300ms;
    -moz-transition-duration: 300ms;
    -o-transition-duration: 300ms;
    -ms-transition-duration: 300ms;
    transition-duration: 300ms;
    -webkit-transition-easing: ease-in-out;
    -moz-transition-easing: ease-in-out;
    -o-transition-easing: ease-in-out;
    -ms-transition-easing: ease-in-out;
    transition-easing: ease-in-out;
    -webkit-transition-property: border-color, -webkit-box-shadow;
    -webkit-transition-property: border-color, box-shadow;
    -moz-transition-property: border-color, -moz-box-shadow;
    -moz-transition-property: border-color, box-shadow;
    -o-transition-property: border-color, box-shadow;
    -ms-transition-property: border-color, box-shadow;
    transition-property: border-color, box-shadow;
}
.fork-link {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 140px;
}
@media only screen and (-webkit-min-device-pixel-ratio:1.25), (min-resolution:120dpi) {
    html {
        background-size: 51px auto;
    }
}

应用前端页面

//kuang.html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
		<style type="text/css">
			.kuang{
				width: 300px;
				height: 500px;
			}
		</style>
	</head>
	<body>
		<div class="kuang">
	        <textarea class="content"></textarea>
	        <a href="javascript:;" class="plBtn">评论</a>
	        <p></p>
		</div>
		<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery.flexText.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(".content").flexText()
			$(".plBtn").click(
				function(){
					var a = $(".pre span").text();
//					a+=$(".pre span").text()//加了两遍，肯定不行
					$("p").html(a)
					
				}
			)
		</script>
	</body>
</html>

注意要引入jq文件