All geek questions in one place

How to enable tabs in HTML editing window?

I know that this is probably a very beginner question that I just can’t find the answer to, but anyway.

How do you allow an HTML editing block with multiple lines to include tabs in it? (instead of moving to the next control)

I would prefer to do this without javascript.

+3
source share
4 answers

You cannot do this without JavaScript. Here is a sample made using jQuery if you want to go this route.

+2
source

Look here :

<html>
<head>
<script type="text/javascript">
function setSelectionRange(input, selectionStart, selectionEnd) {
  if (input.setSelectionRange) {
    input.focus();
    input.setSelectionRange(selectionStart, selectionEnd);
  }
  else if (input.createTextRange) {
    var range = input.createTextRange();
    range.collapse(true);
    range.moveEnd('character', selectionEnd);
    range.moveStart('character', selectionStart);
    range.select();
  }
}

function replaceSelection (input, replaceString) {
    if (input.setSelectionRange) {
        var selectionStart = input.selectionStart;
        var selectionEnd = input.selectionEnd;
        input.value = input.value.substring(0, selectionStart)+ replaceString + input.value.substring(selectionEnd);

        if (selectionStart != selectionEnd){ 
            setSelectionRange(input, selectionStart, selectionStart +   replaceString.length);
        }else{
            setSelectionRange(input, selectionStart + replaceString.length, selectionStart + replaceString.length);
        }

    }else if (document.selection) {
        var range = document.selection.createRange();

        if (range.parentElement() == input) {
            var isCollapsed = range.text == '';
            range.text = replaceString;

             if (!isCollapsed)  {
                range.moveStart('character', -replaceString.length);
                range.select();
            }
        }
    }
}


// We are going to catch the TAB key so that we can use it, Hooray!
function catchTab(item,e){
    if(navigator.userAgent.match("Gecko")){
        c=e.which;
    }else{
        c=e.keyCode;
    }
    if(c==9){
        replaceSelection(item,String.fromCharCode(9));
        setTimeout("document.getElementById('"+item.id+"').focus();",0);    
        return false;
    }

}
</script>
</head>
<body>
<form>
<textarea name="data" id="data" rows="20" columns="35" wrap="off" onkeydown="return catchTab(this,event)" ></textarea>
<input type="submit" name="submit" value="Submit"/>
</form>
0
source

, , HTML , javascript (, jQuery), .

- javascript.

(ugh. Never mind. I was thinking of the visual tabs of the user interface, not the tab character.)

0
source 
<input id="textbox" />

<script language="JavaScript">
<!--


    var textbox = document.getElementById("textbox");
    if (textbox.addEventListener)
        textbox.addEventListener("keydown", this.textbox_keyHandler, false);
    else if (textbox.attachEvent)
        textbox.attachEvent("onkeydown", this.textbox_keyHandler);
    function textbox_keyHandler(e)
    {
        if (e.keyCode == 9)
        {
            var textbox = document.getElementById("textbox");
            textbox.value += "\t";
            if(e.preventDefault) e.preventDefault();
            return false;
        }
    }

// -->
</script>
-1
source

Source: https://habr.com/ru/post/1725974/

More articles:


All Articles