这是不容易起功效的,会完好无损地輸出。官方不觉得这是1个bug: The place" />

用CSS完成textArea中的placeholder换行作用

日期:2020-10-19 类型:科技新闻 

关键词:建站平台有哪些,如何建设网站,免费自助建站,如何建立一个网站,网站建站的

textArea的placeholder不可以换行。比如:

<textarea placeholder="第1行  \n 第2行 <br> 第3行 \A 第4行
第5行"></textarea>

这是不容易起功效的,会完好无损地輸出。

官方不觉得这是1个bug:

    The placeholder attribute represents a short hint (a word or short phrase)

    For a longer hint or other advisory text, the title attribute is more appropriate.

意思便是说placeholder表明的是1个简易的提醒(1个词或1个短语),压根不必须换行。如文字过长,那就用title。

可是具体运用中,大家有时必须换行。怎样处理?许多情况下大家用JavaScript来处理,实际上CSS还可以完成。

因为placeholder特性是能够用css实际操作的,因此大家能够用:after来把placeholder的內容写到CSS中,曲线图救国。

CSS Code拷贝內容到剪贴板
  1. textarea::-webkit-input-placeholder:after{   
  2.   display:block;   
  3.   content:"line@ \A line#";/*  \A 表明换行  */  
  4.   color:red;   
  5. };  

以上是webkit的编码,Firefox类也是有相应的版本号:

CSS Code拷贝內容到剪贴板
  1. textarea::-moz-placeholder:after{   
  2.   content:"line@ \A line#";/*  \A 表明换行  */  
  3.   color:red;   
  4. };