Click here to Skip to main content
14,874,662 members
Articles / Programming Languages / Javascript
Technical Blog
Posted 9 Jul 2010



JavaScript: How to Simulate Hyperlink editable list box with TextArea

Rate me:
Please Sign up or sign in to vote.
5.00/5 (3 votes)
9 Jul 2010CPOL1 min read
This blog intends to identify a technique to convert textarea HTML control to Editable Hyperlink Listbox efficiently.

This article intends to identify a technique to convert textarea HTML control to Editable Hyperlink Listbox efficiently.


The code snippet uses pure HTML and JavaScript technology.

Step 1: Bind TextArea “Double Click” event to the required JavaScript code.
Step 2: Get Caret/Cursor position within the text area.
Step 3: Extract current line text from text area.
Step 4: Check for valid URL format and fix URL if necessary.
Step 5: Open New window/Tab with selected URL.

Getting Caret/Cursor Position

The code for getting Caret/Cursor position is based on the Mr. Alex's implementation available at

However, the bug fix to count 2 characters for the IE line termination(“\r\n”) is included in this code.

Getting Current Selected Line

GetCurrentLine function uses string search functions to identify the line termination characters related to cursor position within the textarea to extract the selected line.


String.prototype.trim = function() {      
    return this.replace(/^\s+|\s+$/g, "");       

function OpenLink(hyperLinkID) {      
    var txtHyperLink = document.getElementById(hyperLinkID); 

    //Step 2: Get Caret/Cursor position with in the text area      
    var CaretPosition = GetCaretPosition(txtHyperLink); 

    //Step 3: Extract current line text from text area.      
    var line = GetCurrentLine(txtHyperLink.value, CaretPosition); 

    //Step 4: Check for valid URL format and fix URL if necessary      
    if (line) {       
        line = line.trim();       
        if (line.length > 0) {       
            if (line.indexOf(‘://’) == -1) {       
                line = "http://" + line;       

            //Step 5: Open New window/Tab with selected URL.      

function GetCaretPosition(control) {      
    var CaretPos = 0;       
    // IE Support       
    if (document.selection) {       
        var Sel = document.selection.createRange();       
        var Sel2 = Sel.duplicate();       
        var CaretPos = 0;       
        var CharactersAdded = 1;       
        while (Sel2.inRange(Sel)) {       
            //old GetCaretPosition always counts 1 for linetermination       
            if (Sel2.htmlText.substr(0, 2) == "\r\n") {       
                CaretPos += 2;       
                CharactersAdded = 2;       
            else {       
                CharactersAdded = 1;       
        CaretPos -= CharactersAdded;       
    // Firefox support       
    else if (control.selectionStart || control.selectionStart == '0')       
        CaretPos = control.selectionStart;      
    return (CaretPos);  

function GetCurrentLine(Text, Position) {      
    var lineTermination = "\n"; //Mozilla opera etc       
    if (document.all) { // IE       
        lineTermination = "\r\n";       
    var lineTerminationLength = lineTermination.length;       
    var startPosition = Position;       
    //always search one character position back to avoid wrong calculations       
    //when cursor position is at the end of the line       
    if (Position > 0)       
    var lineStart = Text.lastIndexOf(lineTermination, Position);      
    //if cursor at first line or  new line and cursor at the beginning       
    if (lineStart == -1 || (lineStart <= 0 && startPosition == 0))       
        lineStart = 0;       
        lineStart = lineStart + lineTerminationLength;  
    var lineEnd = Text.indexOf(lineTermination, lineStart);      
    if (lineEnd == -1)       
        lineEnd = Text.length;       
    return Text.substring(lineStart, lineEnd);       

function OpenHyperLink(line) { ;       


  1. All data and information provided on this page is for informational purposes only. Some parts of this tutorial are taken from the specified links and references. The mentioned writings belong to their corresponding authors.
  2. The opinions expressed herein are my own personal opinions and do not represent my employer’s view in any way.



This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Sabarinathan A
India India
I have been programming for last 20 years on various platforms including .NET, Visual Basic 6, Oracle and SQL server.

I decided to write articles when I have free time hoping to share my thoughts with you.

To know more about me visit

Comments and Discussions

GeneralFormat Code Pin
Arun Jacob8-Jul-10 2:52
MemberArun Jacob8-Jul-10 2:52 
GeneralRe: Format Code Pin
Sabarinathan A8-Jul-10 8:24
professionalSabarinathan A8-Jul-10 8:24 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.