/    Sign up×
Community /Pin to ProfileBookmark

Preventing interaction with page from js

Copy linkTweet thisAlerts:
Mar 27.2006

I have created a print / print preview feature as follows:
1. Open new window
2. Cut and paste portions of my current page into this new window (via js using .innerHTML property)
3. executed window.print() on the new window

Problem is that due to the way this print preview window was constructed (step 2) there are objects such as input boxes and drop-down menus that user can modify (but shouldn’t, since this is intended to be read-only preview window).

Is there any cross-browser compatible way of disabling any interaction with the HTML objects on the preview page (short of going object by object and marking is as disabled)?

thanks in advance…

to post a comment
JavaScript

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@dh2006Mar 27.2006 — It's possible to catch all events like onclick, onkeydown and so on.

I don't have code at hand right now tough.

catching events

or maybe intercepting events

Dieter
------------


Stefanie.de/Tageskurier.de/Recreation.de
Copy linkTweet thisAlerts:
@A1ien51Mar 27.2006 — Yeah, use a pdf generator on the server. Only way a user can not change data.

Have you tried setting the disabled or readOnly properties?

Eric
Copy linkTweet thisAlerts:
@konithomimoMar 27.2006 — write a simple script that takes in every object and disables them, or you can put a layer over it so that the user cannot actually interact with the form elements.

... or add to your body tag to blur or focus on something else when the page is clicked on:

onclick="document.body.focus()"

or

onclick="this.blur()"
Copy linkTweet thisAlerts:
@VicauthorMar 27.2006 — Thanks. I thought of putting a layer over the page to disable interaction (see below), but 100% height is only with reference to the window. If the page exceeds the window (vertically scrollable), the excess part at the end is not protected. Any suggestions on how to stretch the layer full height (ie, including scrollable component)?

<div onmousedown='return(false)' style='POSITION: absolute; TOP: 0px; LEFT: 0px; WIDTH: 100%; HEIGHT: 100%'></div>

thanks.......
Copy linkTweet thisAlerts:
@felgallMar 27.2006 — If you just want your visitors to be able to print parts of the page rather than the whole page then you can do it with a couple of stylesheet commands.

&lt;style&gt;@media screen {
.noprint {display:block;}
.print {display:none;}
}
@media print {
.print {display:block;}
.noprint {display:none;}
}&lt;/style&gt;

Now simply add class="print" to those parts of the page that should print but not display on the screen and class="noprint" to those parts that are to display on the screen but not print.
×

Success!

Help @Vic spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.25,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...