Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <title>Expanding textarea</title>
- <style>
- textarea, pre {
- border: 0;
- margin: 0;
- outline: 0;
- padding: 0;
- }
- .expanding {
- border: 1px solid #666;
- position: relative;
- width: 615px;
- }
- .expanding > pre,
- .expanding > textarea {
- background: transparent;
- min-height: 100px;
- padding: 2px;
- white-space: pre-wrap;
- word-wrap: break-word;
- }
- .expanding > textarea {
- width: 100%;
- height: 100px;
- }
- .expanding > pre {
- display: none;
- }
- .expanding.active > textarea {
- height: 100%;
- left: 0;
- overflow: hidden;
- position: absolute;
- resize: none;
- top: 0;
- }
- .expanding.active > pre {
- display: block;
- visibility: hidden;
- }
- </style>
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
- <script type="text/javascript">
- function makeExpanding(cont)
- {
- cont.addClass('active');
- cont.prepend('<pre><span></span><br></pre>');
- var textarea = cont.children('textarea');
- var span = cont.find('span');
- textarea.bind('input', function(){
- span.text(textarea.val());
- });
- }
- $(document).ready(function(){
- makeExpanding($('.expanding'));
- });
- </script>
- </head>
- <body>
- <div class="expanding">
- <textarea>dadas</textarea>
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement