欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

css textarea 高度自適應(yīng),無滾動條

  發(fā)布時間：2009-07-11 13:27:55   作者：佚名   我要評論
用css控制textarea文本域的高度隨內(nèi)容的變化而變化,不出現(xiàn)滾動條.
用css控制textarea文本域的高度隨內(nèi)容的變化而變化,不出現(xiàn)滾動條.
CSS代碼:

復(fù)制代碼
代碼如下:

.t_area{
width:300px;
overflow-y:visible
}
<textarea class="t_area">
隨便在這里輸入內(nèi)容,textarea的高度會隨著你輸入的內(nèi)容而變化,不會出現(xiàn)滾動條,實現(xiàn)很簡單,就是一段css:overflow-y:visible
</textarea>


首先，原則上實現(xiàn)textarea自適應(yīng)必須適用css，不能直接適用“width＝100%”這樣的寫法，具體示例：

復(fù)制代碼
代碼如下:

<style>
textarea
{
width:100%;
height:100%;
}
</style>
<textarea name="textarea">
xxxxx
</textarea>

統(tǒng)一在FF、IE下的顯示效果：
如果用textarea的屬性字數(shù)寬度（cols）和行數(shù)（rows）來控制textarea的大小你會發(fā)現(xiàn)在，在IE和FF下的每行字數(shù)和文字的行數(shù)都不相同，而且在字數(shù)不足滾動的情況下，IE是默認有滾動條的，而FF是沒有滾動條的。
那如何控制textarea在IE中和FF中相同的效果呢，其實比較簡單：
1、用textarea的寬度（widht）和高度（height）來定義textarea的大?。?
2、讓滾動條自適應(yīng)：overflow-y:auto。
IE6中textarea寬度問題
textarea設(shè)了100%寬度,在IE7,FIREFOX都正常顯示.但在IE6里只要輸入文字就會自動增寬.
解決方法:在textarea外再加一個100%寬的div.
讓人抓狂的ie6 ?。。?！
overflow的允許屬性：auto、visible、hidden
示例：
overflow-x:visible;
overflow-y:visible;



用js實現(xiàn)版本

提示：您可以先修改部分代碼再運行

css實現(xiàn)版本（不能在標準頁面中執(zhí)行，已經(jīng)就是不能加
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
）

復(fù)制代碼
代碼如下:

<title>文本域自適應(yīng)高度</title>
<textarea style="width:300px;overflow-y:visible">在這里輸入一些字符看一下，當超出初設(shè)的文本域高度時，文本域自動伸縮變高。


另一個js版本textarea自適應(yīng)高度
項目中要求textarea自適應(yīng)高度，在網(wǎng)上找到這個很好的方法 。記錄下來以后備用。

復(fù)制代碼
代碼如下:

function BodyOnLoad()
{
var textarea= document.getElementById("textarea");
textarea.style.posHeight=textarea.scrollHeight;
}

scrollHeight：獲取對象的滾動高度。
posHeight：設(shè)置或獲取以 height 標簽屬性指定的單位的對象高度。
把方法加在body的onload事件上
<body onload = "BodyOnLoad();">
綜上所述，兼容性什么的用css實現(xiàn)的稍微好點，但是非標準情況下，才可以。

相關(guān)文章

最新評論