要实现这样的效果

第一反应是直接在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. 【2017-04-24】winform基础、登录窗口、窗口属性

    一.winform基础  客户端应用程序:C/S 客户端应用程序可以操作用户电脑中的文件,代码要在用户电脑上执行,吃用户电脑配置. 窗体是由控件和属性做出来的 控件:窗体里所放的东西."视图 ...

  2. 实时Android语音对讲系统架构

    本文属于Android局域网内的语音对讲项目系列,<通过UDP广播实现Android局域网Peer Discovering>实现了局域网内的广播及多播通信,本文将重点说明系统架构,音频信号 ...

  3. 【代码学习】PHP中GD库的使用

    PHP--GD库 ================================================ 一.支持: 需要php支持GD库 二.作用: 验证码.水印.缩放等 三.绘画步骤: ...

  4. 导出Mysql数据库中的数据

    使用mysqldump 指令: D:\>mysqldump -u root -proot bookStore>bookStore.sql

  5. ELK菜鸟手记 (三) - X-Pack权限控制之给Kibana加上登录控制以及index_not_found_exception问题解决

    0. 背景 我们在使用ELK进行日志记录的时候,通过网址在Kibana中查看我们的应用程序(eg: Java Web)记录的日志, 但是默认是任何客户端都可以访问Kibana的, 这样就会造成很不安全 ...

  6. xmlplus 组件设计系列之九 - 树（Tree）

    树形组件是一种具有层级结构的组件,广泛应用于各种场景.本章会实现一个简单的树形组件,尽管功能有限,但你可以通过扩展它来实现自己所需要的树形组件. 数据源 树形组件的数据源可以是 JSON 格式的数据对 ...

  7. Debian 8 下安装持续集成的工具Jenkins

    前情提示:Jenkins是一个开源软件项目,旨在提供一个开放易用的软件平台,使软件的持续集成变成可能. 第一种方法: 1.1 配置java环境变量    解压java到相应目录,我一般习惯把安装的软件 ...

  8. ListView在异步加载动态图片时，往往最后一项或几项被遮盖（IM场景居多）

    如果ListView中得默认图片比较小,新图片加载后,撑大ListView中的对应项,导致最后一项或几项被覆盖. 解决思路: 1.默认图片设定和新图大小一样,换句话说,新图加载后转成和默认图片一样的大 ...

  9. Java的CLASSPATH

    在JDK安装好后,要设置两个变量Path和Classpath,Path是操作系统要求的,这里不谈了,而classpath是Java虚拟机要求的这里做一个详细的解释. 一.classpath的作用 == ...

  10. PHP二位数组按照数组的某个字段值排序

    不多废话 直接代码 /** * @name 排序 按照数组的某个字段值排序 * @param $array 排序数组 $field 排序字段 $direction 排序顺序 * @author wan ...