Autoquotes Demo

Double-click on a sentence to paste it into a comments form directly.

9th October 2004 · Last updated: 5th October 2016
 

Sections/Permalinks

  1. Introduction
  2. JavaScript
  3. Known Problems
  4. Browser Support
  5. Comments

Introduction

For this demo, I have used JavaScript to enable you to double-click on a sentence and see it appear in the textarea of a form. This means you don't have to spend time trying to highlight the exact text with the mouse. The text appears ready for commenting via the use of speech marks and linebreaks. You can test it out now by double-clicking on any sentence on this page highlighted with a blue background.

Originally I planned to insert a "Q" at the end of the chosen sentences, so you could just click on that. But I couldn't see a way to program it precisely. (My JavaScript skills clearly aren't good enough.)

To make my code work, download the JavaScript below. Then call it when the page loads, like this:

<body onload="makelist();">

Then you need to add a span around any sentences (or any text you like) that you want the user to copy as quotes. Of course they can copy and paste other text as well, but not as quickly. Add a unique ID and the class "q" for each span. The text will then look like this:

<span id="q1" class="q">Rabbits are fluffy and fun.</span>

Here is the JavaScript used. I'll explain it after.

JavaScript

makelist = function() {
 thelist = document.getElementsByTagName('span');
 for (j=0; j<thelist.length; j++) {
  node = thelist[j];
  node.ondblclick = function() {
   ref = this.id;
   check = ref.slice(0,1);
   if (check == 'q') {
    c = document.getElementById(ref);
    d = c.innerHTML;
    t = document.getElementById('text');
    if (t.value == '') {
     t.value += '"' + d + '"\n\n';
     } else {t.value += '\n\n"' + d + '"\n\n';}
    this.className="lit";
    t.focus();
   }
  }
 }
}

JavaScript File (as above)

Firstly, an array is made of each span tag on the page. This is so a function can be added to each one, avoiding repetitive inline function calls in the HTML. The function is activated whenever the mouse is double-clicked over a span. At first I used a single click, but this made it impossible to copy single words in the text for your own use, or to click on links without triggering the JavaScript.

The ID of each span is then checked to make sure it is one of the highlighted sentences. Otherwise you could double-click on any span on the page and the text would be copied. To solve this I've stuck to using 'q' plus a number for each span's ID. Of course this means you can't use any other spans that have IDs beginning with 'q'.

Next, the 'innerHTML' of the span is retrieved - in other words, the text within it. Then a check is made to see if the form is blank or not. (Has the user typed something into it yet?) If it's blank, the text is copied into the form followed by two linebreaks. (Speech marks are also added.) However, if someone has already typed something into the form, the function adds the text as before, but this time preceded by two linebreaks. This means that the quoted text is always separated by enough lines of space in which to type a reply.

Lastly, the colour of the highlight is changed to indicate that the text has been quoted.

Known Problems

One thing that didn't occur to me as I worked on this was that it's likely the text in a sentence has tags within it, perhaps to give emphasis, or provide a link. Sadly, these tags are also copied into the form. If anyone knows of a solution to this, let me know. (Can JavaScript do regular expressions? They would be useful in removing any tags in the text.)

Also, speech marks in the text come out as HTML entities. (Eg: &quot;) Yet a few symbols and accented characters I tried came out okay.

Browser Support (Windows XP SP2)

  • Opera 7.54 - superb (if you can live with the menu that pops up on double-clicking text.)
  • Opera 7.60 Preview 2 - superb
  • IE6, 7 - superb
  • Firefox 0.10.1 PR 1 - superb. (Note: the form is not cleared on refreshing the page.)

Test Area




Comments (2)

Comments are locked on this topic. Thanks to everyone who posted a comment.

  1. noDe:
    There is regular expression support in JS, not sure how to implement it though. I've never used regular expressions before, but I'm pretty sure there is support for it. Off the top of my head, I would say that a reletively easy way to filter out tags would be to create an array of tags you don't want and do a for() loop through the array searching and replacing each occurance of the tag with an empty string ('').

    Might work, never know. In any case, great article and keep 'em commin'!

    -me

    Posted on 10 January 2005 at 8:10 am
  2. mrruben5:
    "My JavaScript skills clearly aren't good enough."

    Hahaha, looking at what you've done here, I'd say they're clear enough for every advanced script :P

    Posted on 12 April 2005 at 7:11 pm