placeholder.html (1507B)
1 <!doctype html> 2 3 <title>CodeMirror: Placeholder demo</title> 4 <meta charset="utf-8"/> 5 <link rel=stylesheet href="../doc/docs.css"> 6 7 <link rel="stylesheet" href="../lib/codemirror.css"> 8 <script src="../lib/codemirror.js"></script> 9 <script src="../addon/display/placeholder.js"></script> 10 <style type="text/css"> 11 .CodeMirror { border: 1px solid silver; } 12 .CodeMirror-empty { outline: 1px solid #c22; } 13 .CodeMirror-empty.CodeMirror-focused { outline: none; } 14 .CodeMirror pre.CodeMirror-placeholder { color: #999; } 15 </style> 16 <div id=nav> 17 <a href="http://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a> 18 19 <ul> 20 <li><a href="../index.html">Home</a> 21 <li><a href="../doc/manual.html">Manual</a> 22 <li><a href="https://github.com/codemirror/codemirror">Code</a> 23 </ul> 24 <ul> 25 <li><a class=active href="#">Placeholder</a> 26 </ul> 27 </div> 28 29 <article> 30 <h2>Placeholder demo</h2> 31 <form><textarea id="code" name="code" placeholder="Code goes here..."></textarea></form> 32 33 <p>The <a href="../doc/manual.html#addon_placeholder">placeholder</a> 34 plug-in adds an option <code>placeholder</code> that can be set to 35 make text appear in the editor when it is empty and not focused. 36 If the source textarea has a <code>placeholder</code> attribute, 37 it will automatically be inherited.</p> 38 39 <script> 40 var editor = CodeMirror.fromTextArea(document.getElementById("code"), { 41 lineNumbers: true 42 }); 43 </script> 44 45 </article>