1

I'm creating a website that allows a user to enter some data into a form, and the form once submitted will return a JSON. My website has a header, a footer, etc. Right now, I'm displaying the JSON inside a div.

My problem: the JSON can potentially be very large. The user of my website would ideally be able to copy the JSON result and use it for other purposes. If the user tries to select the whole JSON via Ctrl+A, it will select all the text in my website, i.e., header and footer. If the user just wants to get the JSON (and it is very large), he/she will have to manually select the JSON.

Is there a HTML element that I can use to render the JSON in (instead of div) so that, when the cursor is focused on this element, it will allow Ctrl+A to just select all the text inside this element? Something similar to this: http://www.jsoneditoronline.org/

I've been looking for different HTML elements, such as pre, but they don't achieve my goal. Maybe I'm not using the right keywords to search in a search engine.

Thanks.

user224567893
  • 636
  • 4
  • 18
  • 28
  • You could also add an `onfocus` listener that sets the page's selection to the contents of the element. See [this question](http://stackoverflow.com/questions/6139107/programatically-select-text-in-a-contenteditable-html-element). – qxz Dec 15 '16 at 02:36

1 Answers1

2

A textarea element will do the trick or add contenteditable="true" to any element and they will be able to select all that way as well. Additionally check out https://clipboardjs.com/ which will allow you to automatically copy content to the users clipboard for them.

Jordan Soltman
  • 3,795
  • 17
  • 31