dev-test/test.html

   1 <!DOCTYPE html>
   2 <html lang="en">
   3 <head>
   4         <meta charset="UTF-8">
   5         <title>ステータスページ</title>
   6         <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
   7         <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
   8         <script>
   9         $(document).ready(function() {
  10             var text_max = 250;
  11             $('#textarea_feedback').val(text_max);
  12
  13             $('#messageBox').keyup(function() {
  14                 var text_length = $('#messageBox').val().length;
  15                 var text_remaining = text_max - text_length;
  16
  17                 $('#textarea_feedback').val(text_remaining);
  18             });
  19         });
  20         </script>
  21         <style>
  22                 #textarea_feedback {
  23                     background-color: #f2f2f2;
  24                     border-color: #bfbfbf;
  25                     font-size: 12px;
  26                     width: 25px;
  27                     text-align: right;
  28                 }
  29         </style>
  30 </head>
  31 <body>
  32         <textarea id="messageBox" maxlength="250"></textarea>
  33         <input type="text" id="textarea_feedback" readonly="readonly">
  34 </body>
  35 </html>