textarea placeholder文字換行
阿新 • • 發佈：2017-06-07
line 設置 div span text 技術分享 源代碼 tor unicode
要實現這樣的效果
第一反應是直接在placeholder屬性值裏輸入\n換行，如：
<textarea rows="5" cols="50" placeholder="1、textarea\n2、success"></textarea>
瀏覽器直接輸出了它，類似地輸入<br/>也行不通
解決方法是換成
<textarea rows="5" cols="50" placeholder="1、textarea 2、success"></textarea>
效果立竿見影， 是unicode字符中的換行符。
另外用js直接設置textarea的placeholder屬性值為‘1、textarea\n2、success‘也是可行的
document.querySelector(‘textarea‘).setAttribute(‘placeholder‘,‘1、textarea\n2、success‘)
註意：兩種方式僅支持Chrome瀏覽器
源代碼：
<!DOCTYPE html> <html> <head> <title>textarea placeholder換行</title> </head><body> <textarea rows="5" cols="50" ></textarea> <textarea rows="5" cols="50" placeholder="1、textarea 2、success"></textarea> <script type="text/javascript"> document.querySelector(‘textarea‘).setAttribute(‘placeholder‘,‘1、textarea\n2、success‘) </script> </body> </html>
BTW，科普一下“換行”和“回車”的區別：
"回車"（carriage return）和"換行"（line feed）是來源機械英文打字機，"車"指的是紙車,帶著紙一起左右移動的模塊， 當開始打第一個字之前，要把紙車拉到最右邊，上緊彈簧，隨著打字， 彈簧把紙車拉回去，每當打完一行後，紙車就完全收回去了，所以叫回車。換行的概念是打字機左邊有個"把手 ",往下 扳動一下,紙會上移一行。
textarea placeholder文字換行