Creating auto-clickable urls
In message boards and in the comment areas of websites, it's often possible for someone to post a comment and point to one or more urls. Unfortunately, most if not all websites expose rather rudimentary means to enter comments. As a result, the comments pointing to one or more urls lack the following :
The remainder of the article provides two ways to add auto-clickable urls to comments or any other text area. The first is a non-interactive technique to convert urls into clickable urls. The other is a full fledged interactive technique providing an elegant way to add clickable urls without being seen.
1. Automatically turning urls into clickable urls
It may be invoked either when the user clicks a special command button, or simply when he submits a form.
The code goes like this. Suppose we have a form where users type some content in a text area named body. The form has a submit button that when activated executes the following routine :
This code automatically adds anchors to urls so they are made clickable. And works on both Netscape Mozilla and Internet Explorer. Notice that no text selection is required.
What now if we are willing to create anchors interactively? For instance, a standard way to link to some document is to have an url prepared in the clipboard, and then manually embed the anchor html tag to it :
2. Interactively turning urls into clickable urls
Interactively creating clickable urls is something much needed in the text area. It is not amazingly odd to introduce a dedicated button at this point, next to the submit button. We add a create link button which, when clicked, replaces the current selection in the text area with a full fledged hyperlink.
In order to make things simple enough, the current selection in the text area is what will become the actual decorated text. So if you are say willing to add a link to a click here, just select those two words and click the button.
Thanks to that paste from the clipboard, the creation of hyperlink is really intuitive. The process can be sumed up as follows :
For the clipboard portion of code to work seamlessly, Internet Explorer must be allowed to paste content, which is the default setting. In case not, bring up the Internet Explorer options, Security tab, Internet Zone, and choose "Allow paste operations" in the options.
Now for the actual code :
The bonus track is that the hyperlink opens in a new browser window, without additional effort.
Stéphane Rodriguez - August 5, 2003.