Develop Reference

Html element to allow Crtl+A of the text inside it

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.

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.

JavaScript dummy/proxy input for another DOM element

I'm using an iframe to get the content of a registration form on a web page, and, as I have to show this registration form inside an HTML app for Android, I'd like to analyse the html inside the iframe to search for input textfields and to use my custom text field as "dummy" or "proxy" for the considered element:
Let me explain better:
As the web page wouldn't give the user the same easy approach as an app, instead of clicking on a textfield and having the problem that the virtual keyboard overlaps the other fields making it difficult to go further.
I want to create a div that covers the iframe and has a text field inside with the same functionality as the one clicked: by this way after entering the text into the dummy field and clicking an ok button aside, the clicked field would be updated and all the other things hidden (virtual keyboard, etc.).
It would be simple if the goal was just to copy a text from a field to another, but the real problem is that the clicked field could have some events like onkeypress or onchange (e.g. to autocomplete) and so on, and I should get the same behaviour on the dummy field.
In an imaginary world I'd do:
document.getElementById("dummy") = document.getElementById("original")
And then destroying and recreating the dummy whenever required.
Do you know if is there something possible to do?

You can't read a div from inside of an iframe after the iframe has loaded. The reason for this is to prevent hackers from making programs that can grab your credit card numbers from web-based forms through iframes and then use the apps to record them.
UPDATE
You would have to retrieve the entire form in the background, then render it again using webkit, then when the person clicks submit, you would have to submit the exact same form data to the host from your device.
Its possible, but I don't see a good reason why you would ever need to use that.

Saving user selection when contentEditable=false

I have included a simple homemade WYSIWYG editor into my HTML Javascript App by using a contentEditable DIV (let's call this EDITDIV) and a series of edit buttons in another DIV. Although far from brilliant it works for me and my users.
My problem is whenever I need to fix the text in EDITDIV which I do by simply setting contentEditable=false, I still want to allow the app users to be able select some of their previously editable text in EDITDIV and perform not edit operations on it, e.g. to use it as a search string.
To do this the users need to be able to select some of the text in EDITDIV and then click outside of EDITDIV. At this point the selection is no more. My question is how do I save the selection to use later on. I could do this every time the selection changes, or at the point when the focus on EDITDIV is lost. I tried both techniques. I cannot find an event (e.g. onselect, onselectionchange) that worked reliably for the first method and for the second method, setting contentEditable to false stops the focus, so the onblur event never happens.
Help much appreciated.

how to inject text into a textbox with firefox extension

This question was probably asked few time by now... but I didn't find any solution in the last 2 days so I'm asking it in here.
I need to inject some text into a textbox that has an ID and I already know it. the scenario is like that:
The user insert a text into the textbox inside my toolbar.
The user clicks on a button in my toolar.
The function in the button should redirect the user to a new page in the background, inject a text into a specified textbox and click a button in that webpage.
Return a link that is generated on the webpage.
I know how to open a new webpage. now all is left is the rest.
I can't seem to inject the text into the specified textbox.
Also to note, I can't use greasemonkey on this project and that's why I will have to write everything I'll need to write.
If you can direct me to the starting point for this problem it would be nice.

The textbox is XUL textbox or html textarea?
It look like your scenario is simulate submit a form in background, why not just directly create a XMLHttpRequest to do this, no need to interactive with UI.
Update:
If it is a XUL textbox, you can use value property
var textbox = window.document.getElementById(textboxId);
if (textbox) {
textbox.value = 'your text';
}

Chrome Extension: How can I show the find bar and supply text for it?

I am making an extension that stores the selected text from the currently active webpage into localstorage, then when the user click on this selected text in my extension's popup, the extension will fire chrome.tabs.create and open the website where the selected text was selected. These functions work, but I don't know how to trigger the 'find' function when the new tab opens. I want the newly created tab to highly the selected text that my extension stored. I think there are two ways to do this...
somehow trigger the 'find' function that the browser by default has. The one with 'Ctrl+F" or 'Command+F" triggers and insert the selected text in there
edit the HTML of the newly created page by highlighting the selected text.
new_source = { "url" : tab[0].url, "title" : tab[0].title, "quote" : selectedQuote, "id" : idSource};
sources.push(new_source);
localStorage["sources"] = JSON.stringify(sources);
This is how I'm storing my information

You can't trigger Chrome's native find dialog, but you can invoke window.find(). The main differences between the native dialog and find() are
find() only highlights one of the matches in the page, whereas the
native dialog highlights all. To be precise, find() will begin by
highlighting the match nearest to the top of the document, and
repeated invocations will move it down the page.
find() will highlight the selected text in with the default blue color, whereas Chrome's find dialog highlights its matches in orange. However, this can be mimicked by modifying the background CSS property of the ::selection pseudo-class.
Depending on your use case this might be sufficient.
However, if you want to highlight a specific quote on the page, and need to account for possible duplicates of that quote, then it's a bit more tricky, and I'm not sure it can be done perfectly. You'll want to get the precise location of the selected text using window.getSelection(), find a way to identify its startNode and endNode across page reloads (if they have ids, this is easy, but if not you'll have to resort to hacks), and then when the page is reopened, use Selection.addRange() to restore it.