要实现这样的效果

第一反应是直接在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. grid实例（Asp.net）

    <link href="../../js/jqGrid/css/ui.jqgrid.css" rel="stylesheet" type="te ...

  2. linux c socket笔记 -服务端

    #include <stdio.h> #include <stdlib.h> #include <string.h> #include <sys/types. ...

  3. 数据可视化之MarkPoint

    MarkPoint是什么效果?如上图,一闪一闪亮晶晶的效果,这是在Echarts中对应的效果.我最早看到的是腾讯的一个Flash的版本,显示当前QQ在线人数的全国分布效果,感觉效果很炫,当时也在想,怎 ...

  4. 详解常用的gulp命令

    gulp.js是一款自动化构建工具,我们经常使用它在开发过程自动执行常见的任务.gulp.js 是基于 Node.js 构建的,利用 Node.js,可以快速构建项目. 由于gulp使用基于node, ...

  5. PHP命名空间理解

    这玩意就是路径! 这玩意就是路径! 这玩意就是路径! 这玩意就是路径! 这玩意就是路径! use 就是声明要用某个路径的文件(类) 再有namespace的情况下,就类似于已经在一个路径里了 这个时候 ...

  6. 【内网渗透】MSF的exploit和pyload的基础使用

    1.连接MSF root@kali:~# msfconsole 2.显示所有攻击模块 msf > show exploits |more 3.寻找攻击模块 msf > search ms0 ...

  7. 天方夜谈·数据结构·Queue

    "我在想Y的时候不能想X....." 什么叫做Queue(队列)?"队列是项的集合,对于每一项x和y,如果x在y之前离开对头,那么x一定在y之前进入队列--Sesh·Ve ...

  8. bzoj4817 [Sdoi2017]树点涂色

    Description Bob有一棵n个点的有根树,其中1号点是根节点.Bob在每个点上涂了颜色,并且每个点上的颜色不同.定义一条路 径的权值是:这条路径上的点(包括起点和终点)共有多少种不同的颜色. ...

  9. 【算法系列学习】[kuangbin带你飞]专题十二 基础DP1 C - Monkey and Banana

    https://vjudge.net/contest/68966#problem/C [参考]http://blog.csdn.net/qinmusiyan/article/details/79862 ...

  10. 关于Content-Type的问题

    今天我在编写html表单提交到 php时,出现了一个很奇怪的现象. 为了让php文件的字符编码与html一致,我在php文件加了一句 header("Content-Type:html/te ...