Submit Hint Search The Forums LinksStatsPollsHeadlinesRSS
14,000 hints and counting!

Make any web page temporarily editable Web Browsers
This hint is similar to the hint Change text on web pages in Safari but is somewhat easier to use.

You can make all the text on any web page temporarily editable right in the browser. All you need is a browser that has a JavaScript console, which is pretty much all of them nowadays. In Safari, the JavaScript console is accessed with the Show Error Console command in the Develop menu. If you don't see the Develop menu, you have to enable it in the Advanced tab of Safari's preferences.

To make a web page editable, open the console and enter the following statement:

document.body.contentEditable = true

Now, when you click on a text element on the page, you will see a standard text cursor. You can add and delete text to your heart's content.

To make the page uneditable again, enter this in the console:

document.body.contentEditable = false

Note that any edits you perform with this trick are strictly temporary; if you reload the page, your edits will vanish. However, you can save the page locally after editing it, if you need to preserve a copy of your edits. Be sure to save it as a 'web archive,' not as 'page source.'

[crarko adds: I tested this, and it works as described.]
  • Currently 4.00 / 5
  You rated: 4 / 5 (12 votes cast)

Make any web page temporarily editable | 5 comments | Create New Account
Click here to return to the 'Make any web page temporarily editable' hint
The following comments are owned by whoever posted them. This site is not responsible for what they say.
Make any web page temporarily editable
Authored by: appjon on Mar 30, '11 07:51:35AM
I don't understand the sudden influx of tips on how to change page text. However, both of these tips are quite complicated compared to how they could be. All that needs to be done is simply copy/paste this into your address bar on nearly any browser, and hit enter. It'll do the exact same thing. You can even make a bookmark with this code so when you click it the page will be instantly visible. Here:

javascript:document.body.contentEditable='true'; document.designMode='on'; void 0

[ Reply to This | # ]
Make any web page temporarily editable
Authored by: vaughnsc on Mar 30, '11 07:58:27AM

I was about to say the same thing just make it a bookmark and stash it in the bar.

[ Reply to This | # ]
Make any web page temporarily editable
Authored by: aubreyapple on Mar 30, '11 09:53:56AM

I say ironically: What a great hint! One can change the content of any page to something obnoxous than print it an 'prove' that the original page owner did this dastardly thing.

Obviously I find that one can even do this highly objectionable and a really bad 'feature' of a browser.

[ Reply to This | # ]
Make any web page temporarily editable
Authored by: maxz on Mar 30, '11 10:22:15AM

But you have always had the possibility to save a web page, edit it, open the edited page in a browser and printed it.

And screenshots are easy to manipulate in image editing software, in fact that is what many webdesigners do on a regular basis. They take an image of an existing web page and show how they could improve on it for the customer.

If you take a printout or screenshot for "evidence", then you really need to learn what to trust.

Edited on Mar 30, '11 10:25:50AM by maxz

[ Reply to This | # ]
Make any web page temporarily editable
Authored by: everkleer80 on Mar 30, '11 10:23:12AM

I will say that there have been a few times where this would have been somewhat useful to me, as I find myself copying content off a webpage and pasting it into an editor just so I can delete the content that I don't want to print (ex. If I am printing movie times, I delete the movies/theaters I'm not interested in so I don't need to waste four pages for the times to one movie in two different theaters.

[ Reply to This | # ]