Copy and Paste without hidden text

[aka Robbie]

Folks

I'm currently working on a page that contains a list of results for a search. One of the things required is hit highlighting for the search term.

So if you were to search for "stuff" it would return:

Dramatic stuff in Political Play

However we have made it accessible for speaking browsers such as JAWS. So it returns:

Dramatic hit stuff in Political Play

As such the html output is:

Dramatic <span class="hit"><span class="hiddenText">hit</span>stuff</span> in Political Play
where class "hit" does the bold, underline, highlighting etc for the browsers, and class "hiddenText" does the obvious and hides the word (to the left of the viewable area) "hit" unless read out.

Unfortunately if a user selects the text "Dramatic stuff in Political Play" and then tries to copy and paste it (into notepad or Word for example), they get "Dramatic hit stuff in Political Play".

Is it possible to do something so that if a user copies and pastes the word "hit" is not picked up?

Cheers

[gwmbox]

What attributes are you using for 'hiddentext'?

display:none?

Or something else?

EDIT: Er re read your post - yes the display: none does what your saying... hmmm I learnt something new :)

Cheers

[Medyman]

What attributes are you using for 'hiddentext'?

Yeah, what is your styling? I'm assuming visibility, instead of display:none since display:none kind of defeats the purpose.

What I usually do is position the "accessible span" off-browser. It still renders for the screen readers but is out of the way for everything else.

[aka Robbie]

Yeah, what is your styling? I'm assuming visibility, instead of display:none since display:none kind of defeats the purpose.

What I usually do is position the "accessible span" off-browser. It still renders for the screen readers but is out of the way for everything else.

Visibility or display does not appear to work. The word "hit" still appears before the word "stuff".


Dramatic hitstuff in Political Play

as has many other things I have tried :(

It doesn't appear to make any difference with the css as the text is always there but only moved/hidden when displayed.

We're using Tapestry along with Prototype and Scriptaculous, so I'm wandering if I should be looking more down that route than traditional code and css?