javascript - Using JFiddle to create web page -
i'm trying understand how convert following jfiddle example single html web page: http://jsfiddle.net/zqa511e9/
what doing wrong? both style , javascript code not being reflected in form. appreciated.
<!doctype html> <html> <head> <title>expandable text area</title> <style> textarea { width: 200px; height:15px; line-height:15px; min-width: 200px; max-width: 300px; transition: width 0.25s; resize:none; overflow:hidden; } </style> <script> $('textarea').on('keydown', function(e){ if(e.which == 13) {e.preventdefault();} }).on('input', function(){ $(this).height(1); var totalheight = $(this).prop('scrollheight') - parseint($(this).css('padding-top')) - parseint($(this).css('padding-bottom')); $(this).height(totalheight); }); </script> </head> <body> <textarea placeholder="autosize" data-autosize-input='{ "space": 40 }'> </textarea> </body> </html>
updated code.
you need 2 things. 1. simport jquery library. 2. write on load in javascript block.
try
<title>expandable text area</title> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> </head> <style> textarea { width: 200px; height:15px; line-height:15px; min-width: 200px; max-width: 300px; transition: width 0.25s; resize:none; overflow:hidden; } </style> <script> $(document).ready(function() { $('textarea').on('keydown', function(e){ if(e.which == 13) {e.preventdefault();} }).on('input', function(){ $(this).height(1); var totalheight = $(this).prop('scrollheight') - parseint($(this).css('padding-top')) - parseint($(this).css('padding-bottom')); $(this).height(totalheight); }); }); </script> </head> <body> <textarea placeholder="autosize" data-autosize-input='{ "space": 40 }'> </textarea> </body> </html>
Comments
Post a Comment