要实现这样的效果

第一反应是直接在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. view测量

    一.测规格是由测量模式mode和测量大小size组成的,size好说,那测量模式mode代表什么含义呢.由上面的代码可知,测量模式有三类:    UNSPECIFIED    父控件不对你有任何限制, ...

  2. Linux-配置vim开发环境

    vim是一个类似于vi的著名的功能强大.高度可定制的文本编辑器,在vi的基础上改进和增加了很多特性.vim是纯粹的自由软件. 为了满足使用者的要求,将vim界面配置为自己想要的界面类型也变得流行起来. ...

  3. kNN算法个人理解

    新手,有问题的地方请大家指教 训练集的数据有属性和标签 同类即同标签的数据在属性值方面一定具有某种相似的地方,用距离来描述这种相似的程度 k=1或则较小值的话,分类对于特殊数据或者是噪点就会异常敏感, ...

  4. Objective-C 实用关键字详解1「面试、工作」看我就 🐒 了 ^_^.

    在写项目 或 阅读别人的代码(一些优秀的源码)中,总能发现一些常见的关键字,随着编程经验的积累大部分还是知道是什么意思 的. 相信很多开发者跟我当初一样,只是基本的常用关键字定义属性会使用,但在关键字 ...

  5. 懵懂oracle之存储过程

    作为一个oracle界和厨师界的生手,笔者想给大家分享讨论下存储过程的知识,因为在我接触的通信行业中,存储过程的使用还是占据了一小块的地位. 存储过程是什么?不得不拿下百度词条的解释来:"存 ...

  6. H5万能选择器：iosselect

    iosselect是个什么东西? 移动端浏览器对于select的展示样式是不一致的,ios下是类似原生的picker,安卓下各浏览器展示各异,我们需要一个选择器组件来统一各端下各种浏览器的展示.下面是 ...

  7. codeforces 782B The Meeting Place Cannot Be Changed (三分)

    The Meeting Place Cannot Be Changed Problem Description The main road in Bytecity is a straight line ...

  8. 【2017-05-05】timer控件、三级联动、帐号激活权限设置

    一.Timer控件 Timer实际就是一个线程控件. 属性:Enabled    是否被启用 Interval     多长时间执行一次控件中的代码 事件: Tick     事件中放要执行的代码. ...

  9. 九思老客户分享：部署OA办公系统的四大意义

    原文:http://www.jiusi.net/detail/472__776__4009__1.html 关键词:OA办公系统.oa系统 .九思OA 九思老客户分享:部署OA办公系统的四大意义 当今 ...

  10. 谈谈RDD、DataFrame、Dataset的区别和各自的优势

    在spark中,RDD.DataFrame.Dataset是最常用的数据类型,本博文给出笔者在使用的过程中体会到的区别和各自的优势 共性: 1.RDD.DataFrame.Dataset全都是spar ...