要实现这样的效果

第一反应是直接在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. AngularJS学习笔记5

    11.AngularJS  HTML DOM ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性. <button ng-disabled="my ...

  2. java多线程基本概述（二十）——中断

    线程中断我们已经直到可以使用 interrupt() 方法,但是你必须要持有 Thread 对象,但是新的并发库中似乎在避免直接对 Thread 对象的直接操作,尽量使用 Executor 来执行所有 ...

  3. Web.简单配置

    XML 元素不仅是大小写敏感的,而且它们还对出现在其他元素中的次序敏感.所有这些元素都是可选的.因此,可以省略掉某一元素,但不能把它放于不正确的位置. icon icon元素指出IDE和GUI工具用来 ...

  4. html自定义调控

    为什么需要自定义数据属性? 很多时候我们需要存储一些与不同DOM元素相关联的信息.这些信息对于读者来说可能是不需要的,但是可以轻松的访问这些信息将会给我们开发者的工作带来极大的便利. 例如,假设你有一 ...

  5. 内核初始化优化宏(__init, __devinit)

    在内核里经常可以看到__init, __devinit这样的语句,这都是在init.h中定义的宏,gcc在编译时会将被修饰的内容放到这些宏所代表的section. 原文地址:http://blog.c ...

  6. java文件创建和删除

    流的操作在项目开发中用的很普遍,虽然每次在网上都可以百度到,但是总感觉心里不踏实,对此,关于流的操作做一个详细的总结--- 1.根据数据的流向来分:输出流:是用来写数据的,是由程序(内存)---> ...

  7. react native 升级到0.31.0的相关问题 mac xcode开发环境

    cmd + D和cmd + R快捷键没有反应 0.31.0版本换了一种加载方式,通过修改userDefaults达到debug目的 [userDefaults setObject:@"127 ...

  8. 【挖洞经验】如何在一条UPDATE查询中实现SQL注入

    直奔主题 跟往常一样,在喝完我最爱的果汁饮料之后,我会习惯性地登录我的Synack账号,然后选择一个应用来进行渗透测试,此时我的“黑客之夜”便正式开始了. 我与很多其他的安全研究人员的习惯一样,我会在 ...

  9. python爬虫第一天

    python爬虫第一天 太久没折腾爬虫 又要重头开始了....感谢虫师大牛的文章. 接下来的是我的随笔 0x01 获取整个页面 我要爬的是百度贴吧的图,当然也是跟着虫师大牛的思路. 代码如下: #co ...

  10. 栈的Java简单实现

    关于栈 栈(Stack)是限定只能在一段进行插入和删除操作的线性表. 进行插入和删除操作的一端称为“栈顶”(top),另一端称为“栈底”(bottom). 栈的插入操作称为“入栈”(push),栈的删 ...