自适应高度文本框,没有滚动条,并且随内容多少自动变换高度,美观方便。
方法一:
css代码:
<style type="text/css">
.textarea{
width: 99%;
min-height: 20px;
_height: 120px;
margin-left: auto;
margin-right: auto;
padding: 3px;
outline: 0;
border: 1px solid #a0b3d6;
font-size: 12px;
line-height: 24px;
padding: 2px;
word-wrap: break-word;
overflow-x: hidden;
overflow-y: auto;
border-color: rgba(171,173,179, 0.8);
}
</style>
html代码:
<div id="divId" class="textarea" style="margin-top:0px;" contenteditable="true">
<br />
</div>
这时如果需要设置div中的内容可以用:
document.getElementById(“divId”).innerText=”内容”;
设置;
获取里边的值可以用:
var value=document.getElementById(“divId”).innerText;
或者
var beiZhu=$(“#div_beiZhu”).text(); –这是jquery代码
来获取。
获取的值如果需要存入数据库,如SQLServer,该字段类型只能用vchar(**)来保存,如果用别的类型或是text类型的话,需要保存的值中的 换行 和 空格 会出现不同的问题。所以可以适用于小容量的需要。
方法二:
这是代码:
<!DOCTYPE html>
<html>
<head>
<title>autoresizing textarea</title>
<style type="text/css">
textarea {
border: 1px solid #a0b3d6;
overflow: auto;
min-height: 20px;
max-height: 500px;
/*高度值根据屏幕高度设置,是为了防止文本框高度大于屏幕高度后再点击换行或空格时,页面自动定位到文本框顶端,那么页底文字就看不到的情况。 这也是该方法缺点之一,上一个方法就不会出现这个问题*/
padding: 0;
outline: none;
background-color: #fff;
resize: none;
margin-top:0px;
width:100px;
}
</style>
<script type="text/javascript">
var observe;
if (window.attachEvent) {
observe = function (element, event, handler) {
element.attachEvent('on'+event, handler);
};
}
else {
observe = function (element, event, handler) {
element.addEventListener(event, handler, false);
};
}
function init () {
var text = document.getElementById('text');
function resize () {
text.style.height = 'auto';
var vHeight= text.scrollHeight + 2;
text.style.height =vHeight +'px';
}
/* 0-timeout to get the already changed text */
function delayedResize () {
window.setTimeout(resize, 0);
}
observe(text, 'change', resize);
observe(text, 'cut', delayedResize);
observe(text, 'paste', delayedResize);
observe(text, 'drop', delayedResize);
observe(text, 'keydown', delayedResize);
text.focus();
text.select();
resize();
}
</script>
</head>
<body onload="init();">
<textarea cols="" rows="" id="text"></textarea>
</body>
</html>
这个方法的文本框的值可以在数据库中用任意字段类型保存,格式都不会出现错乱。只是代码量较多,使用麻烦。
两种方法优缺点比较:
第一种代码简洁,使用方便,可以大量使用,只是存储会出现一定问题。
第二种代码较复杂,但是适用范围更广,存储更加灵活方便。