Use Tab to Indent in Textarea

Support tabs for indentation in <textarea>

The issue is solely caused by your use of arrow functions, which are affecting the scope the logic runs under. Hence this is the window, not the textarea which raised the event. Use traditional anonymous functions and your code works fine - and is also now supported by all versions of IE.

Also note that as you're using jQuery already you may as well use it to attach unobtrusive event handlers and for its succinct methods for amending form control values. Try this:

$(function() {  $('#input').on('keydown', function(e) {    if (e.keyCode == 9 || e.which == 9) {      e.preventDefault();      var s = this.selectionStart;      $(this).val(function(i, v) {        return v.substring(0, s) + "\t" + v.substring(this.selectionEnd)      });      this.selectionEnd = s + 1;    }  });});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><textarea id="input"></textarea>

How can I insert TAB to indent code from textarea

Based on the link you provided, I have tested one of the answers and it seems to be working as intended. You just have to provide a closing </textarea> tag to each of your textareas.

<textarea id="html" onkeydown="if(event.keyCode===9){var v=this.value,s=this.selectionStart,e=this.selectionEnd;this.value=v.substring(0, s)+'\t'+v.substring(e);this.selectionStart=this.selectionEnd=s+1;return false;}"></textarea>

<textarea id="css" onkeydown="if(event.keyCode===9){var v=this.value,s=this.selectionStart,e=this.selectionEnd;this.value=v.substring(0, s)+'\t'+v.substring(e);this.selectionStart=this.selectionEnd=s+1;return false;}"></textarea>

<textarea id="js" onkeydown="if(event.keyCode===9){var v=this.value,s=this.selectionStart,e=this.selectionEnd;this.value=v.substring(0, s)+'\t'+v.substring(e);this.selectionStart=this.selectionEnd=s+1;return false;}"></textarea>

How to handle <tab> in textarea?

You can: http://jsfiddle.net/sdDVf/8/.

$("textarea").keydown(function(e) {
    if(e.keyCode === 9) { // tab was pressed
        // get caret position/selection
        var start = this.selectionStart;
        var end = this.selectionEnd;

        var $this = $(this);
        var value = $this.val();

        // set textarea value to: text before caret + tab + text after caret
        $this.val(value.substring(0, start)
                    + "\t"
                    + value.substring(end));

        // put caret at right position again (add one for the tab)
        this.selectionStart = this.selectionEnd = start + 1;

        // prevent the focus lose
        e.preventDefault();
    }
});

HTML text area tab support

See this question:

https://stackoverflow.com/a/13130/420001

You're looking for .preventDefault();

EDIT: A fiddle.

EDIT 2: A better fiddle, thanks to rainecc.

In textarea, replace two \n with tab indent while typing

That appears to be an issue with Vue version 1. Your code works as expected using Vue v2.

If you need to use that version of Vue, you should explicitly listen to the input event and call a method to update the value of testVal:

new Vue({  el: '#app',  data: {    testVal: 'Val'  },    methods: {    updateTestVal() {      this.testVal = this.testVal.replace(new RegExp('(\n){2,}', 'gim') , "\t");          console.log(this.testVal)    }  }})

textarea {  width: 500px;  height: 500px}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script><div id="app">  <textarea v-model="testVal" @input="updateTestVal"></textarea></div>

How do you keep the tab level in a textarea when pressing enter?

http://jsfiddle.net/DVKbn/

$("textarea").keydown(function(e){
    if(e.keyCode == 13){

        // assuming 'this' is textarea

        var cursorPos = this.selectionStart;
        var curentLine = this.value.substr(0, this.selectionStart).split("\n").pop();
        var indent = curentLine.match(/^\s*/)[0];
        var value = this.value;
        var textBefore = value.substring(0,  cursorPos );
        var textAfter  = value.substring( cursorPos, value.length );

        e.preventDefault(); // avoid creating a new line since we do it ourself
        this.value = textBefore + "\n" + indent + textAfter;
        setCaretPosition(this, cursorPos + indent.length + 1); // +1 is for the \n
    }
});

function setCaretPosition(ctrl, pos)
{

    if(ctrl.setSelectionRange)
    {
        ctrl.focus();
        ctrl.setSelectionRange(pos,pos);
    }
    else if (ctrl.createTextRange) {
        var range = ctrl.createTextRange();
        range.collapse(true);
        range.moveEnd('character', pos);
        range.moveStart('character', pos);
        range.select();
    }
}

Use tabs in textarea field

The best plugin I've seen for this is the Tabs in Textarea plugin. You can try a demo on its page.

The setup is fairly simple, since it has a simple effect:

$("textarea").tabby();

The thing that annoyed me most about other plugins was lack of shift+tab, which this handles. You can do this without a plugin, but I wouldn't in this case...it's be quite a bit of code yourself, depending on the functionality you're after. TextRange operations in a cross-browser way are still a bit hairy under the covers, this is one of the times that a plugin is a better approach, IMO.

Tab inside textarea element in Typescript/Angular

Angular provides a keydown event that can be used on HTML elements. Add this to your <textarea> element and pass the event that gets fired on keydown.

<textarea (keydown)="handleKeydown($event)"></textarea>

In the Component's TS file, create the handleKeydown function. This will accept the event as the incoming object. event.target is a reference to the element that fired the event. In this case, the <textarea> element.

The code is mostly the same as the JS, but instead of using this, the code uses event.target in it's place.

handleKeydown(event:any) {
    if (event.key == 'Tab') {
        event.preventDefault();
        var start = event.target.selectionStart;
        var end = event.target.selectionEnd;
        event.target.value = event.target.value.substring(0, start) + '\t' + event.target.value.substring(end);
        event.target.selectionStart = event.target.selectionEnd = start + 1;
    }
}

How to map a key TAB within a text area

<textarea (keydown)="onTab($event)"></textarea>

If you want to prevent to loose focus from the text area on tab you can use below code in you ts.

  onTab(event) {
      console.log(event);
      if (event.key === 'Tab') {
        event.preventDefault();
     }
  }