{"id":72462,"date":"2026-03-29T03:01:00","date_gmt":"2026-03-28T17:01:00","guid":{"rendered":"https:\/\/www.rjmprogramming.com.au\/ITblog\/?p=72462"},"modified":"2026-03-30T11:48:00","modified_gmt":"2026-03-30T01:48:00","slug":"using-document-writeln-onpaste-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/using-document-writeln-onpaste-tutorial\/","title":{"rendered":"Using Document Writeln Onpaste Tutorial"},"content":{"rendered":"
\"Using<\/a>

Using Document Writeln Onpaste Tutorial<\/p><\/div>\n

Regarding yesterday’s Using Document Writeln Primer Tutorial<\/a> you might wonder …<\/p>\n

\nWhy involve either\/both textarea and div (contenteditable=true) elements as “containers” of content?\n<\/p><\/blockquote>\n

Well, with yesterday’s starting onblur<\/i> (just) event gambit, it’s a very pertinent question, but, today, we introduce onpaste<\/i> event work, and involving this event with the div<\/i> element can have it distinguishing itself, able to accept graphical (eg. image) content. For example, the user can have their cursor placed into the div<\/i> element and have been in an image editor having Edit->Select Alled<\/sup> and Edit->Copyed<\/sup> graphical content, then that can be Edit->Pasted<\/sup> into the div<\/i> as graphical content.<\/p>\n

As you might imagine, this opens a Pandora’s Box of possibilities regarding image sizing, but we apply inline CSS styling …<\/p>\n


\n style='object-fit:contain;width:100%;height:100%;'
\n<\/code><\/p>\n

… to the img<\/i> data URIed<\/sup> element within the div<\/i> element that happens when graphical content is pasted into it, so that the graphical data is unlikely to spill too far outside the div<\/i> bounds, assuming only one image is pasted, that is.<\/p>\n

So feel free to try a changed<\/a> using_writeln.html<\/a> first draft Using (Document) Writeln<\/a> web application for you to try yourself.<\/p>\n

\n

\n

Previous relevant Using Document Writeln Primer Tutorial<\/a> is shown below.<\/p>\n

\"Using<\/a>

Using Document Writeln Primer Tutorial<\/p><\/div>\n

The other day we stumbled on some advice leading us to use …<\/p>\n


\ndocument.writeln<\/a>([html-content]);
\n<\/code><\/p>\n

… rather than our usual “go to” …<\/p>\n


\ndocument.write<\/a>([html-content]);
\n<\/code><\/p>\n

And so we wrote a “proof of concept” using_writeln.html<\/a> first draft Using (Document) Writeln<\/a> web application for you to try yourself.<\/p>\n

If this was interesting you may be interested in this<\/a> too.<\/p>\n