摘要:一和的區(qū)別元素用于為基于的表單創(chuàng)建交互式控件,以便接受來(lái)自用戶的數(shù)據(jù)。
一、input 和 textarea 的區(qū)別 input:
HTML 元素用于為基于Web的表單創(chuàng)建交互式控件,以便接受來(lái)自用戶的數(shù)據(jù)。
textarea:
HTML 元素代表一個(gè)多行的純文本編輯控件.區(qū)別:
標(biāo)簽是成對(duì)的,有結(jié)束標(biāo)簽進(jìn)行閉合,標(biāo)簽的內(nèi)容寫在標(biāo)簽對(duì)中間;是單個(gè)標(biāo)簽,標(biāo)簽的內(nèi)容通過(guò) value 屬性設(shè)置;
的值是純文本;的值根據(jù)類型不同而不同;
沒有type屬性;有多種type來(lái)滿足表單與用戶的數(shù)據(jù)交互;
的值可以是多行的,并且有rows和cols來(lái)控制多行結(jié)構(gòu);的值是單行的;
二、用 div 模擬 textarea 標(biāo)簽 步驟:給 div 添加一個(gè)HTML全局屬性:contenteditable="true",使 div 元素變成用戶可編輯的;
給 div 添加樣式 resize: vertical;,使 div 可以被用戶調(diào)整尺寸,注意:別忘了設(shè)置 overflow: auto; 樣式,因?yàn)?b>resize樣式不適用于overflow: visible;的塊,不然 resize 不起效哦;
增加一個(gè)屬性:placeholder="I am placeholder";
通過(guò) 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; }效果:
歡迎交流,歡迎交朋友。
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/51464.html
摘要:一和的區(qū)別元素用于為基于的表單創(chuàng)建交互式控件,以便接受來(lái)自用戶的數(shù)據(jù)。 一、input 和 textarea 的區(qū)別 input: HTML 元素用于為基于Web的表單創(chuàng)建交互式控件,以便接受來(lái)自用戶的數(shù)據(jù)。 textarea: HTML 元素代表一個(gè)多行的純文本編輯控件. Write something here 區(qū)別: 標(biāo)簽是成對(duì)的,有結(jié)束標(biāo)簽進(jìn)行閉合,標(biāo)...
摘要:與事件事件與事件均用于表單處理事件,它們之間的本質(zhì)區(qū)別是否支持冒泡處理實(shí)例其中元素可以觸發(fā)事件是的父元素,當(dāng)它包含的元素觸發(fā)了事件時(shí),它就產(chǎn)生了事件在元素本身產(chǎn)生,在元素包含的元素中產(chǎn)生與也亦是如此事件元素,和元素的值都是可以發(fā)生改變的,開 blur與focus事件 focusin、focusout事件 與blur、focus事件均用于表單處理事件,它們之間的本質(zhì)區(qū)別:是否支持冒泡處理...
摘要:目錄第章事件介紹第章鼠標(biāo)事件第章表單事件第章鍵盤事件第章事件的綁定和解綁第章事件對(duì)象的使用第章自定義事件與事件用交互操作中,最簡(jiǎn)單直接就是點(diǎn)擊操作。提供了兩個(gè)方法一個(gè)是方法用于監(jiān)聽用戶單擊操作,另一個(gè)方法是方法用于監(jiān)聽用戶雙擊操作。 目錄 第1章 事件介紹 第2章 鼠標(biāo)事件 第3章 表單事件 第4章 鍵盤事件 第5章 事件的綁定和解綁 第6章 事件對(duì)象的使用 第7章 自定義事件 cli...
摘要:目錄第章事件介紹第章鼠標(biāo)事件第章表單事件第章鍵盤事件第章事件的綁定和解綁第章事件對(duì)象的使用第章自定義事件與事件用交互操作中,最簡(jiǎn)單直接就是點(diǎn)擊操作。提供了兩個(gè)方法一個(gè)是方法用于監(jiān)聽用戶單擊操作,另一個(gè)方法是方法用于監(jiān)聽用戶雙擊操作。 目錄 第1章 事件介紹 第2章 鼠標(biāo)事件 第3章 表單事件 第4章 鍵盤事件 第5章 事件的綁定和解綁 第6章 事件對(duì)象的使用 第7章 自定義事件 cli...
摘要:通常情況下,為了給用戶一個(gè)良好的體驗(yàn),需要讓這個(gè)多行文本輸入框的高度自適應(yīng),從而避免滾動(dòng)條帶來(lái)的問(wèn)題。到此,才算實(shí)現(xiàn)一個(gè)高度自適應(yīng)的多行文本輸入框。 一、前言 ??通過(guò)創(chuàng)建 textarea 標(biāo)簽,并且指定其 rows 和 cols 屬性,就可以創(chuàng)建一個(gè)多行文本輸入框。 ??但是當(dāng)輸入的內(nèi)容超過(guò)指定的 rows 之后,就會(huì)出現(xiàn)滾動(dòng)條,如果用戶想要查看全部?jī)?nèi)容,那就必須來(lái)回的拖動(dòng)滾動(dòng)條。...
閱讀 1436·2021-11-17 09:33
閱讀 3026·2021-10-13 09:39
閱讀 2700·2021-10-09 10:01
閱讀 2451·2021-09-29 09:35
閱讀 3898·2021-09-26 10:01
閱讀 3523·2019-08-26 18:37
閱讀 3154·2019-08-26 13:46
閱讀 1915·2019-08-26 13:39