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

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.

Related

Way to synchronize two editable text boxes on a specific web page?

I'm currently using Tampermonkey to inject JavaScript into specific web pages.
For my job, I have to constantly fill in numerous text boxes on the same web page with the same exact information. So instead of manually copying and pasting everything to each separate text box, I'd like to be able to synchronize my input on one text box with another. So as an example, theoretically, I could type "dog" into the first box, and the word "dog" would appear in the second box automatically. Is this possible in Tampermonkey via JavaScript?
I'm assuming <input type="text"> and/or an element ID or name could be used to link the interaction of two elements on a specific page?
I'm not exactly sure where to get started here, so any and all advice would be deeply appreciated.
To synchronize all text boxes on the page, you could do something like this:
document.addEventListener("input",function(e) {
if (e.target.matches("input[type=text]")) {
document.querySelectorAll("input[type=text]").forEach(function(a) {
a.value = e.target.value;
});
}
});

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.

How can I generate a list of html elements on a particular page?

I am adding a help text model to my rails app, which allows admins to create help text for pages on my site. The form that allows admins to make help text requires text, location, and admin name. I would like the location attribute to have two input fields. The first being the particular page, and the second being the exact html element that the help text is to appear in.
How can I generate a list of the elements on the specified page?
Once the location is selected, I will build a helper to convert that into an xpath. From there, the help text and icon(s) will be added to the page via JavaScript.
If this approach isn't the most effective, what might be another method? RubyGems, scripts, rails magic, etc.
TL;DR How can I generate a list of html elements only knowing the page.

Transferring Data Both Ways Between Parent and Child Popup Window

I have spent a couple of days looking for something to accomplish my needs, and I have been unable to find it.
I have a basic HTML input box in a parent window that has text in it (from a MySQL query). I need to be able to generate a popup window that shows a textarea which contains this same text. I would then need to be able to edit the text in the textarea, press a button, and have it close the window, and send the text back to the parent window's input box.
I am indifferent to the use of jquery, as I am already loading it for other elements on the page. I just want whatever works. Thank you for your help.

Chrome Extension: Temporarily swap/stash clipboard contents

I am in the process of creating a chrome extension that allows you to click on context menu options when you are in an editable element. Clicking a context menu option automatically places some text where the cursor is.
The problem I am having is that the process for placing the text differs based on where the text is being placed. For example, If the text is being placed in a textarea, (like the one I am typing in now), the process is different than if I need to put the text in, say, a YouTube comment box, which is its own custom div and does not support the operations that I would use when editing the contents of a normal textarea
In my search for a flexible solution that would work the same for all elements that are in the editable category of the chrome.contextMenus API, I thought of the following Idea:
I should be able to do what I want if I store my variable in the system clipboard with document.execCommand('copy') and then paste it in wherever the cursor is with document.execCommand('paste')
The downside here is that the user would loose whatever they used to have in their clipboard.
I originally planned on just pasting the original contents into my own textarea, then restoring it once I am done with the clipboard, but there are 2 problems with this approach:
The user would loose whatever formatting they had originally
This would only work for text, not images.
Is there a way that I can save the contents of the clipboard that would allow me to copy them back to the clipboard at later time without the user noticing any modification to the content?
If I have any glaring misconceptions, please correct me as I am new to
JS, the DOM and HTML

Categories

Resources