要实现这样的效果

第一反应是直接在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浏览器支持（2017-06-06）

源代码：

<!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文字换行的更多相关文章

  1. 修改 input / textarea placeholder 属性的颜色和字体大小

    话不多说,直接上代码: input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #666; fon ...

  2. 如何让textarea placeholder 文字垂直居中

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  3. textarea之placeholder

    placeholder 属性适用于以下的 <input> 类型:text, search, url, telephone, email 以及 password.这个属性是html5才有的新 ...

  4. 修改input和textarea的placeholder的颜色，限制文本框字数输入

    <style type="text/css"> textarea{ width: 400px; height:400px; resize: none; } .limit ...

  5. 使用JQuery统计input和textarea文字输入数量代码

    本文主要介绍了jQuery实现统计输入文字个数的方法,需要的朋友可以参考下. HTML部分: <input type="text" value="我是输入的文字&q ...

  6. 兼容IE8 input的placeholder的文字显示

    if( !('placeholder' in document.createElement('input')) ){ $('input[placeholder],textarea[placeholde ...

  7. Placeholder在IE8的兼容问题

    <script type="text/javascript"> if( !('placeholder' in document.createElement('input ...

  8. placeholder不兼容 IE10 以下版本的解决方法

    对于密码输入框placeholder的兼容问题:HTML代码:<input type="password" id="loginPassword" plac ...

  9. 【JS】IE兼容placeholder

    直接上代码: $(document).ready(function () { var doc = document, textareas = doc.getElementsByTagName('tex ...

随机推荐

  1. 【HDOJ 1086】 模板水过

    You can Solve a Geometry Problem too Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/3 ...

  2. SQL生成一年每一天的时间列表的几种方法

    工作好几年了,一直没有写博客,准备捡起来...   以下脚本适用环境:SQL SERVER (starting with 2012)   1.构建序列:   /*1-1:利用交叉连接,推荐下列这种写法 ...

  3. js里变量的作用域

    一.在js中,变量的定义并不是以代码块作为作用域的,而是以函数作为作用域.也就是说,如果变量是在某个函数中定义的,那么,它在函数以外的地方是不可见的.但是,如果该变量是定义在if或者for这样的代码块 ...

  4. stl_泛型的一些基本

    一.泛型编程的一些基本 : 1.泛型程序设计: 1.1.程序尽可能的通用. 1.2.将算法从数据结构中抽象出来,成为通用. 1.3.模板并不是单纯的函数,不能凭空的生成,是用来产生代码的代码,可以减少 ...

  5. Swiper使用方法

    Swiper使用方法 1.首先加载插件,需要用到的文件有swiper.min.js和swiper.min.css文件. <!DOCTYPE html> <html> <h ...

  6. Silverlight的DataGrid合并单元格

    现在也不知道还有没有同学做Silverlight开发了,我是一个Silverlight菜鸟,遇到问题也很难百度查到.就简单的记录一下这两天遇到的问题,并做了一个简单的小Demo,希望能够帮助到其他同学 ...

  7. Visual Lisp获得网络时间的方法

    (defun c:tt (/ ie-obj) (setq ie-obj (vlax-get-or-create-object "Msxml2.xmlhttp")) ) (vlax- ...

  8. session与cookie-----2017-05-08

    会话控制:目的是记录不同用户身份. 1.session:有实效性 特点: (1)存在在服务器 (2)每个用户都会存一份 (3)可以存储任意类型的数据 优点:安全性高 缺点:服务器压力过大 2.cook ...

  9. java线程（四）

    java5线程并发库 线程并发库是JDK 1.5版本级以上才有的针对线程并发编程提供的一些常用工具类,这些类被封装在java.concurrent包下. 该包下又有两个子包,分别是atomic和loc ...

  10. 【复制粘贴】silverlight网格选择日期和时间

    今天有个功能需要在网格中输入时间,本来是用文本框的,但是客户说不知道格式,要求用选择的形式,好像silverlight又没有能选择时间的控件,谷歌下得到一个曲线救国的答案,记录下 <sdk:Da ...