
完美解決textarea輸入框提示文字,必須添加默認內容
input/ 有placeholder標簽,可以添加提示文字 ,但是 textarea 沒有,一般來說我們是把提示內容寫在 textarea 外面,如下圖: 
當然,這樣的布局并不是最想要的效果,
最想要的是文字顯示在輸入框內,點擊輸入框時隱藏,離開輸入框時,如果輸入框沒有內容,又顯示提示:
網上搜到的都是利用js通過獲取或失去焦點來設置textarea的內容,這有個最大的問題就是:因為設置了默認內容,如果用戶不點擊輸入框,直接提交,就把默認的提示內容提交到后臺了。
本人想出來的解決方案是:將提示內容寫在一個p中,通過css的position屬性來控制,將p顯示到 textarea 中,點擊 textarea 時,隱藏到p,這樣即使用戶不點擊輸入框直接提交,也不會把默認的提示文字提交到后臺,效果如下圖: 
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns= http://www.w3.org/1999/xhtml head meta http-equiv= Content-Type content= text/html; charset=utf-8 / title 解決textarea輸入框提示文字,必須添加默認內容 /title style type= text/css body{font-size:12px;} p,p{margin:0;padding:0} .textarea{ width:350px;height:80px;position:absolute;background:none;z-index:9 .note{ position:absolute;line-height:20px;padding:3px 5px; /style /head body p >以上就是html中textarea輸入框提示文字必須添加默認內容的完美解決的詳細內容,html教程
鄭重聲明:本文版權歸原作者所有,轉載文章僅為傳播更多信息之目的,如作者信息標記有誤,請第一時間聯系我們修改或刪除,多謝。
新聞熱點
疑難解答