摘要:一和的區別元素用于為基于的表單創建交互式控件,以便接受來自用戶的數據。
一、input 和 textarea 的區別 input:
HTML 元素用于為基于Web的表單創建交互式控件,以便接受來自用戶的數據。
textarea:
HTML 元素代表一個多行的純文本編輯控件.區別:
標簽是成對的,有結束標簽進行閉合,標簽的內容寫在標簽對中間;是單個標簽,標簽的內容通過 value 屬性設置;
的值是純文本;的值根據類型不同而不同;
沒有type屬性;有多種type來滿足表單與用戶的數據交互;
的值可以是多行的,并且有rows和cols來控制多行結構;的值是單行的;
二、用 div 模擬 textarea 標簽 步驟:給 div 添加一個HTML全局屬性:contenteditable="true",使 div 元素變成用戶可編輯的;
給 div 添加樣式 resize: vertical;,使 div 可以被用戶調整尺寸,注意:別忘了設置 overflow: auto; 樣式,因為resize樣式不適用于overflow: visible;的塊,不然 resize 不起效哦;
增加一個屬性:placeholder="I am placeholder";
通過 CSS 選擇器獲取并顯示 placeholder 的值;
直接上代碼:.textarea { height: 200px; width: 300px; padding: 4px; border: 1px solid #888; resize: vertical; overflow: auto; } .textarea:empty:before { content: attr(placeholder); color: #bbb; }效果:
歡迎交流,歡迎交朋友。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/112652.html
摘要:一和的區別元素用于為基于的表單創建交互式控件,以便接受來自用戶的數據。 一、input 和 textarea 的區別 input: HTML 元素用于為基于Web的表單創建交互式控件,以便接受來自用戶的數據。 textarea: HTML 元素代表一個多行的純文本編輯控件. Write something here 區別: 標簽是成對的,有結束標簽進行閉合,標...
摘要:與事件事件與事件均用于表單處理事件,它們之間的本質區別是否支持冒泡處理實例其中元素可以觸發事件是的父元素,當它包含的元素觸發了事件時,它就產生了事件在元素本身產生,在元素包含的元素中產生與也亦是如此事件元素,和元素的值都是可以發生改變的,開 blur與focus事件 focusin、focusout事件 與blur、focus事件均用于表單處理事件,它們之間的本質區別:是否支持冒泡處理...
摘要:目錄第章事件介紹第章鼠標事件第章表單事件第章鍵盤事件第章事件的綁定和解綁第章事件對象的使用第章自定義事件與事件用交互操作中,最簡單直接就是點擊操作。提供了兩個方法一個是方法用于監聽用戶單擊操作,另一個方法是方法用于監聽用戶雙擊操作。 目錄 第1章 事件介紹 第2章 鼠標事件 第3章 表單事件 第4章 鍵盤事件 第5章 事件的綁定和解綁 第6章 事件對象的使用 第7章 自定義事件 cli...
摘要:目錄第章事件介紹第章鼠標事件第章表單事件第章鍵盤事件第章事件的綁定和解綁第章事件對象的使用第章自定義事件與事件用交互操作中,最簡單直接就是點擊操作。提供了兩個方法一個是方法用于監聽用戶單擊操作,另一個方法是方法用于監聽用戶雙擊操作。 目錄 第1章 事件介紹 第2章 鼠標事件 第3章 表單事件 第4章 鍵盤事件 第5章 事件的綁定和解綁 第6章 事件對象的使用 第7章 自定義事件 cli...
摘要:通常情況下,為了給用戶一個良好的體驗,需要讓這個多行文本輸入框的高度自適應,從而避免滾動條帶來的問題。到此,才算實現一個高度自適應的多行文本輸入框。 一、前言 ??通過創建 textarea 標簽,并且指定其 rows 和 cols 屬性,就可以創建一個多行文本輸入框。 ??但是當輸入的內容超過指定的 rows 之后,就會出現滾動條,如果用戶想要查看全部內容,那就必須來回的拖動滾動條。...
閱讀 1648·2019-08-30 15:55
閱讀 973·2019-08-30 15:44
閱讀 866·2019-08-30 10:48
閱讀 2025·2019-08-29 13:42
閱讀 3179·2019-08-29 11:16
閱讀 1235·2019-08-29 11:09
閱讀 2053·2019-08-26 11:46
閱讀 611·2019-08-26 11:44