實現textarea文字框多行提示文字效果

admin發表於2017-03-29

在比較人性化的網站中，textarea文字框通常會有預設的提示文字，告訴使用者要怎麼樣填寫內容。

通常情況下可能只需要一條提示就可以，但是也有時候需要有多行提示，下面就通過程式碼例項介紹一下如何實現此功能。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
textarea{
  width:300px;
  height:200px;
}
textarea::-webkit-input-placeholder:after{
  display:block;
  content:"只有努力才會有美好未來\A 珍惜每一天";/*  \A 表示換行  */
}
</style>
</head>
<body>
<textarea placeholder="螞蟻部落歡迎您"></textarea>
</body>
</html>

上面的程式碼可以在谷歌瀏覽器中實現此效果，其他瀏覽器使用各自字首也可以實現，這裡就不列舉了。

各個瀏覽器字首可以參閱css針對各個瀏覽器的字首是什麼一章節。

相關文章