SHOW LINE NUMBER OF TEXT AREA

WHEN WE ENTER , SHOW LINE NUMBER IN TEXT AREA

HTML PAGE:-

<textarea class="line-numbers" cols="3" readonly="readonly" rows="5"></textarea>
<%= text_area_tag :query_editor, '' :name => "query_editor", :class => "add_query_editor" %>


<script type="text/javascript">
   $(".add_query_editor").keyup(function(event) {
     $(this).prev().height($(this).height());
     $(this).prev()[0].scrollTop = this.scrollTop;
   });

   $(".add_query_editor").keyup(function(event) {
     var elm = $(this);
     var lines = elm.val().split("\n");
     var numbers = "";
     for(var i=0; i<lines.length; i++)
     numbers += (i+1) + "\n";
     elm.prev().val(numbers);
     elm.prev()[0].scrollTop = this.scrollTop;
  });

</script>

<style type="text/css">
   .line-numbers {
      background-color: aqua
      text-align: right;
      position:relative;
      border: none;
      overflow: hidden;
      float: left;
      width: 3% !important;
      margin: 16px 0px 10px;
      min-height: 120px;
      font-size: 14px !important;
      padding-top: 10px !important;
   }
   .add_query_editor {
      margin-top: 15px !important;
      min-height: 120px;
      font-size: 14px !important;
      padding-left: 10px !important;
      padding-top: 10px !important;
      width: 93% !important;
      float: left;
   }
</style>


WE CAN FOLLOW :-

http://jsfiddle.net/qZqX8/

Comments

Unknown said…
//remark is text area id
$("#remark").focus(function() {
if(document.getElementById('remark').value === ''){
document.getElementById('remark').value +=1;
}
});
$("#remark").keyup(function(event) {

var keycode = (event.keyCode ? event.keyCode : event.which);
if(keycode == '13'){
var elm = $(this);
var lines = elm.val().split('\n');
var numbers = "";
for(var i=0; i<lines.length; i++)
{
numbers = i+1;}
document.getElementById('remark').value +=numbers;
}

});

Popular posts from this blog

psql: could not connect to server: No such file or directory Is the server running locally and accepting connections on Unix domain socket "/var/run/postgresql/.s.PGSQL.5432"?

CARRIERWAVE - UPLOAD ANY MEDIA (AUDIO , VIDEO AND IMAGE ) FILE IN RAILS

SELECT COUNTRY WITH STATE AND IT'S CITIES RAILS

RAILS: UPLOADING PHOTOS VIA AMAZON S3 AND PAPERCLIP (UPLOADING FILES TO S3 IN RUBY WITH PAPERCLIP)

SEARCHING USING AJAX IN RAILS

UPLOAD ANY MEDIA FILE IN RAILS USING PAPERCLIP

CURL COMMAND ON RUBY ON RAILS

UNINITIALIZED CONSTANT PAPERCLIP::STORAGE::S3::AWS

CHECK PASSENGER RUBY PATH