Allow mouse to select text (for ctrl-c copy) on a 'onclick' html element

[dscorca]

I have a large html container which has an onclick event used to bring up an entry window. Our users want to select text with their mouse (which starts with a click) so they can select part of the text to copy and paste elsewhere.

I don't really want to change my action to a ondblclick event. Is it possible to somehow delay the onclick if they start dragging and selecting text? Are their any other suggestions on how to do it?

Thank you all in advance.

[Scott Klement]

Off the top of my head... instead of 'onclick' maybe use 'onmousedown' and 'onmouseup'?

onmousedown occurs when they push down on the mouse button, and onmouseup occurs when they release it. So the idea is to check the position of the mouse when they push down and when they release... if the mouse up position is very close to the mouse down position, then bring up your entry window.

But if the mouse position has moved (more than a few pixels) before the mouse button was released, then someone was probably selecting text, so in that case, don't bring up the entry window.

Just a thought, I haven't tried it (and don't have time right now)

[dscorca]

Thank you Scott. That gives me something new to try although I'm not sure how to retrieve the pixel location of the cursor when the onmouseup/down events occur. Would the script be something like the following on each event (with different variables of course).

var x1 = event.clientX;
var y1 = event.clientY;

Sorry, I'm not too slick with JS yet.

[Scott Klement]

Well, yeah, that was my idea... you'd just code something like this:

MOUSE DOWN EVENT:

Code: Select all

(function (e) {
   e = e || window.event;  // for compat with old Internet Explorer

   if (typeof window.banyan == "undefined") {
      window.banyan = {};
   }

   banyan.mouseDownX = e.clientX;
   banyan.mouseDownY = e.clientY;
})

MOUSE UP EVENT:

Code: Select all

(function (e) {
   e = e || window.event;  // for compat with old Internet Explorer

   if (typeof window.banyan != "undefined") {

     banyan.mouseUpX = e.clientX;
     banyan.mouseUpY = e.clientY;

     var xdiff = Math.abs(banyan.mouseUpX - banyan.mouseDownX);
     var ydiff = Math.abs(banyan.mouseUpY - banyan.mouseDownY);
     
     if (xdiff<10 && ydiff<10) {
       pui.click("showWindow");   // click the hidden "show window" button 
                                  // because mouse hasn't moved much.
     }
   }
})

So basically, the 'onmousedown' saves the X/Y position of the client, and 'onmouseup' compares it against them.. if the mouse has moved (in this example, by 10 pixels) then it doesn't count it as a click....

I don't know how your code to open the window works, so, I just stuck a "pui,click" in there... you'll have to adjust that code to be what you want.

[Scott Klement]

I must admit, I'm not sure if the way I posted is good or not... it's just off the top of my head.

[dscorca]

Thank you so much Scott. I can take what you posted and run with it to see how to works out. Any help is, as always, greatly appreciated.

[dscorca]

FYI Scott...

The example you gave works perfectly.

[ndeppe]

I am having a similar issue, except in my case it is with a grid that allows for row selection. It looks like the row selection is preventing users from selecting text on the grid. Does anyone know of a workaround for this?

[Scott Klement]

Sorry, I don't know of a workaround for the conflict between row selection and selecting text with a mouse. Row selection shjould work with moving the mouse, etc, so you can use that method to select lots of rows. So, it really needs the ability to take over the mouse.

The only way around this that I can think of is to use a different method of selecting rows. For example, add a checkbox to each row of the grid, and let the user select rows by checking the checkbox instead of using row selection.