How to Handle <Tab> in 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();
    }
});

ReactJS handle tab character in textarea

you can try onKeyDown and get the keycode for tab.

add: function(event){
    console.log(event.keyCode); //press TAB and get the keyCode
},
render: function(){
    return(
        <div>
            <input type="text" id="one" onKeyDown={this.add} />    
        </div>
    );
}

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.

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;
    }
}

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 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();
    }
}

---

Related Topics