Indentation in Textarea using jQuery

    [javascript]
    <!DOCTYPE html>
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    </head>
    <body>
    <script language="javascript">
    $(document).ready(function(e) {

    // Using the <TAB>
    $(‘textarea.tab’).keydown(function(e) {
    if(e.keyCode == 9) {
    var start = $(this).get(0).selectionStart;
    $(this).val($(this).val().substring(0, start) + "\t" + $(this).val().substring($(this).get(0).selectionEnd));
    $(this).get(0).selectionStart = $(this).get(0).selectionEnd = start + 1;
    return false;
    }
    });

    // Using Spaces
    $(‘textarea.space’).keydown(function(e) {
    if(e.keyCode == 9) {
    var start = $(this).get(0).selectionStart;
    $(this).val($(this).val().substring(0, start) + " " + $(this).val().substring($(this).get(0).selectionEnd));
    $(this).get(0).selectionStart = $(this).get(0).selectionEnd = start + 4;
    return false;
    }
    });
    });
    </script>

    <h5>Using the &lt;TAB&gt;</h5>

    <textarea cols="40" rows="10" class="tab"></textarea>

    <h5>Using Spaces</h5>
    <textarea cols="40" rows="10" class="space"></textarea>
    </body>
    </html>
    [/javascript]

    Leave a Reply