How to select line of text in textarea

Related searches

I have a textarea that is used to hold massive SQL scripts for parsing. When the user clicks the "Parse" button, they get summary information on the SQL script.

I'd like the summary information to be clickable so that when it's clicked, the line of the SQL script is highlighted in the textarea.

I already have the line number in the output so all I need is the javascript or jquery that tells it which line of the textarea to highlight.

Is there some type of "goToLine" function? In all my searching, nothing quite addresses what I'm looking for.

This function expects first parameter to be reference to your textarea and second parameter to be the line number

function selectTextareaLine(tarea,lineNum) {
    lineNum--; // array starts at 0
    var lines = tarea.value.split("\n");

    // calculate start/end
    var startPos = 0, endPos = tarea.value.length;
    for(var x = 0; x < lines.length; x++) {
        if(x == lineNum) {
            break;
        }
        startPos += (lines[x].length+1);

    }

    var endPos = lines[lineNum].length+startPos;

    // do selection
    // Chrome / Firefox

    if(typeof(tarea.selectionStart) != "undefined") {
        tarea.focus();
        tarea.selectionStart = startPos;
        tarea.selectionEnd = endPos;
        return true;
    }

    // IE
    if (document.selection && document.selection.createRange) {
        tarea.focus();
        tarea.select();
        var range = document.selection.createRange();
        range.collapse(true);
        range.moveEnd("character", endPos);
        range.moveStart("character", startPos);
        range.select();
        return true;
    }

    return false;
}

Usage:

 var tarea = document.getElementById('myTextarea');
 selectTextareaLine(tarea,3); // selects line 3

Working example:

http://jsfiddle.net/5enfp/

Selecting textarea line with Javascript // Lostsource, The following function allows you to select (highlight) a specific line in a textarea programmatically function selectTextareaLine(tarea,lineNum)� The <textarea> tag defines a multi-line text input control. The <textarea> element is often used in a form, to collect user inputs like comments or reviews. A text area can hold an unlimited number of characters, and the text renders in a fixed-width font (usually Courier).

The code in the post by darkheir does not work correctly. Based on it I shortened the code and made it working.


    function onClickSelection(textarea){
        if(typeof textarea.selectionStart=='undefined'){
            return false;
        }
        var startPos=(textarea.value.substring(0,textarea.selectionStart).lastIndexOf("\n")>=0)?textarea.value.substring(0,textarea.selectionStart).lastIndexOf("\n"):0;
        var endPos=(textarea.value.substring(textarea.selectionEnd,textarea.value.length).indexOf("\n")>=0)?textarea.selectionEnd+textarea.value.substring(textarea.selectionEnd,textarea.value.length).indexOf("\n"):textarea.value.length;
        textarea.selectionStart=startPos;
        textarea.selectionEnd=endPos;
        return true; 
    }

HTML DOM Textarea select() Method, The select() method selects the entire contents of a text area. Browser Support. Method. select(), Yes, Yes, Yes, Yes, Yes. Syntax. textareaObject.select()� Definition and Usage. The select() method selects the entire contents of a text area.

To make the function more forgiving on possible faulty input add after:

// array starts at 0
lineNum--;

This code:

if (typeof(tarea) !== 'object' || typeof(tarea.value) !== 'string') {
  return false;
}

if (lineNum === 'undefined' || lineNum == null || lineNum < 0) {
  lineNum = 0;
}

Highlight All Text by Clicking on Text Field or Textarea Box , This script highlight all text in textarea or text field (input tag) by clicking on it. It allows users to reduce their manual work. For instance when users need to copy to� A multi-line text input field can be created by using the HTML <textarea> element. You need to use the cols and rows attributes of this element to set the text area size. The <textarea> must be used within a <form> element. Next, see examples of adding a multi-line text area with a "submit" button. Example of creating a multi-line input field:¶

How to select line of text in textarea javascript double click on particular line.

//This function expects first parameter to be reference to your textarea. 
function ondblClickSelection(textarea){
    var startPos = 0;
    var lineNumber = 0;
    var content = "";
    if(typeof textarea.selectionStart == 'undefined') {
        return false;
    }
    startPos = textarea.selectionStart;
    endPos = textarea.value.length;
    lineNumber = textarea.value.substr(0,startPos).split("\n").length - 1;
    content = textarea.value.split("\n")[lineNumber];
    var lines = textarea.value.split("\n");
    var endPos = lines[lineNumber].length+startPos;
    textarea.selectionStart = startPos;
    textarea.selectionEnd = endPos;
    return true; 
}

Highlight Text Inside a Textarea / Coder's Block, You can't actually highlight text in a <textarea>. the content and scroll position from the textarea to the div, so everything lines up nicely. The text in a text area with wrap="hard" will contain newlines (if any) when submitted in a form: <textarea rows="2" cols="20" wrap="hard"> At W3Schools you will find free Web-building tutorials.

Force Selection of Text Block, Have you ever seen (or put yourself) some text into a <textarea> or <input> , not because it Click line to select all, in supporting browsers. You would need to use document.getElementById('textarea').value to access any text the user has entered or modified. On page load, placeholder text is put as inner HTML between the <textarea></textarea> tags, but this not modified when a user adds input. – Eric Barker May 1 at 14:13 |

An issue is the users ability to select more than one line at a time or a partial line. And yes, I must use textArea. I have right now where the delete button is reading what got deleted and displays it.

It represents a multi line area that displays text. It is used to edit the text . JTextArea inherits JComponent class. The text in JTextArea can be set to different available fonts and can be appended to new text . A text area can be customized to the need of user . Constructors of JTextArea are: JTextArea() : constructs a new blank text area .

Comments
  • By the way, everything is contained on a single page. No 'submits' or anything.
  • start here stackoverflow.com/questions/646611/… or here stackoverflow.com/questions/1712417/… then you need to work out how your parse button (no code supplied) knows where the selection should be
  • That is spectacularly fantastic. Thank you so much!
  • If for some reason you find yourself needing to deselect any selection: window.getSelection().removeAllRanges()
  • I have no idea why but the jsfiddle is not selecting the line text, it is not working.
  • @AmrElgarhy, It wasn't working for me as well, I removed mootools and it started to work. If you can't remove mootools then replace it with jquery.
  • @HimanshuTanwar Yes, I added jquery instead of mootools and it worked, thank you.
  • your startPos selected also the \n character from previous line, adding +1 to it fixed the job (textarea.value.substring(0, textarea.selectionStart).lastIndexOf("\n") >= 0) ? textarea.value.substring(0, textarea.selectionStart).lastIndexOf("\n") + 1 : 0;
  • Hello... sorry for reviving this thread. As a complete novice to JS I adapted it to work in an HTA using the onclick event for the textarea element. However it appears to work perfectly well without the if condition, and return statements, under what circumstances are they required?