解決textarea被拉伸問題


textarea 禁止拉伸問題

  eg:<textarea rows="3" cols="25" name="imgTable.imgDesc" style="resize: none; "></textarea> 

  HTML 標簽 textarea 在大部分瀏覽器中只要指定行(rows)和列(cols)屬性,就可以規定 textarea 的尺寸,大小就不會改變,不過更好的辦法是使用 CSS 的 height 和 width 屬性,但是Chrome,Safari和FireFox渲染的效果不同,可以拖動右下角圖標改變大小。但是過分拖動大小會影響頁面布局,使頁面變得不美觀。

  可以通過添加如下兩個樣式:

    1.禁用拖動;

      利用css,給textarea加上一個屬性resize,值設置為none即可;

       eg:style="resize:none;"

    2固定大小.

      固定大小之后,但是拖動的圖標仍在.

      eg:textarea{

          width:200px;

          height:100px;

          maxwidth:200px;

          maxheight:100px;

        }

  textarea在IE、Firefox下統一效果的解決方案 

    如果用textarea的屬性字數寬度(cols)和行數(rows)來控制textarea的大小你會發現在,在IE和Firefox下的每行字數和文字的行數都不相同,而且在字數不足滾動的情況下,IE是默認有滾動條的,而FF是沒有滾動條的。

  那如何控制textarea在IE中和Firefox中相同的效果呢,其實比較簡單:

    1、用textarea的寬度(widht)和高度(height)來定義textarea的大小;
    2、讓滾動條自適應:overflow-y:auto。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM