Develop Reference

How to fill in Google Form's drop down and text inputs with Tampermonkey?

I am trying to automate an attendance form hosted by Google Forms, but the inputs aren't HTML <input> or <select> elements, so I am not sure how to change them other than manipulating the mouse and keyboard (an approach I used with Selenium).

Based off a fast peak; you could
let Form = document.querySelector('.freebirdFormviewerViewItemList');
let itemContainer = Form.querySelectorAll('.freebirdFormviewerViewNumberedItemContainer');
itemContainer.forEach((element)=>{
// Your code here, you should in theory be doing deeper loops depending on how advanced you want this.
});
Inside the loop we'd need to just find all the active inputs we want with a
itemContainer.forEach((element)=>{
if(element.querySelector('.exportOuterCircle')) {
console.log('we found ourselves a radio button but just one, we could go deeper with querySelector (and help of loops/etc)')
}
});
This is a bit of a large-task but not so bad, just make sure the freebirdFormviewerViewNumberedItemContainer class is correct every-form to or y ou find the pattern per-page that selects the questions for a fast loop through.
On loop, you're to query select one or more(if so apply another loop) to find the options you want. In this demo above radio button search, if the pages stay static you should with my example be able to grab/see a console pop-up no errors;
For setting these values, it's as easy in some cases setAttribute/value/ and other modifiers once selection is made. So you know click already and so the radio buttons be a good example. Any issues try navigating your elements in developer menu and sort if selections are going down correctly.
https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

Trying to asses an element and change a specific part without changing the rest or without having them in multiple lines

So I have created a Periodic table of elements, and what I am trying to do is have someone be able to push a button have some script determine if that element is already there if it is to add a subscript and leave the rest of the chemical formula alone for example I push the Hydrogen button once the Oxygen button once and then realize that I need to push the hydrogen button again I want it to go from HO to H(sub(2))O and keep the O as is without deleting it. how could I do that? I can send you my HTML file if that helps you understand my question more.

It would be more helpful with the code, but this is fairly easy. Just use $(element).html() to get the information, split the string using string.split(certain character); or substrings.
Then add it back to the DOM using $(element).html(substring1 + "inserted string" + substring2);
Without jQuery, use the .innerHTML attribute of document.querySelector(element), to change the value of the element.
Hope that helps!!

Caret behavior inside contenteditable true and next to contenteditable false elements

I'm trying to create a textarea that listens to URLs typed, pasted or dropped and converts them to links. These links are not editable and must be treated as blocks. Delete and backspace must delete them. Finally, it would be nice if they show full selection when the caret is moved through them.
Problems: after spending too much time and trying some of the suggested solutions found here on stackoverflow (Tim Down), I still couldn't get it to work correctly. I'm finding it very hard to have the caret in the correct place all the time and after pasting a link and the automatic conversion is done, the selection is locked and no input can be done. I tried to insert and keep a zero width character before and after each link but then other selection problems started to occurr.
Can someone please have a look at the following fiddle which represents a simplified version focusing the problem and point me to the right direction for the correct keyboard navigation through these non-editable links inside a contenteditable div?
jsFiddle here
$("#customtextarea").on("input propertychange drop paste", function (e) {
var $this = $(this), savedSelection = saveSelection($this.get(0));
var parsedHtml = getParsedHtml($this.html()); // This gets the innerhtml with the urls turned to links
$this.html(parsedHtml).focus();
restoreSelection($this.get(0), savedSelection);
});
EDIT: I've taken the approach suggested by XuoriG and I'm still facing more or less the same issues as before: caret gets 'stuck' after the link and the links can't be deleted. Also keyboard navigation (left, right) is not working.
New jsFiddle here

When using $this.html you're replacing the entire DOM and losing your selection.
The way I was able to do this is by creating and removing DOM nodes on the fly on every key up. I can't post code for you right now but basically you go through every node on key up and create a new anchor tag with the content matched by your url regex and remove that from text node. Repeat until you dont have any more matches in the node. You'll be able to save and restore the selection this way.
The hard part after is being able to append to an existing url. The way I did it is by detecting if a text node is right next to an anchor tag, and if the anchor text + the text node matches an url too you append the text node to the anchor tag and remove the text node.

selecting multiple elements using shift and mouse click - jquery

Is it possible to use shift and mouse click to select multiple elements on a page using jquery?
I have several divs that i have given a tabindex to so that i can select them and can do things like delete them etc.
I want to be able to select more than 1 by holding down shift and using the mouse to click on each div and am struggling to do this.
Does anyone know how this can be done?

I did something like that some time ago, with jQuery:
$(id).click(function(event){ //Mouse Click+shift event
if(event.shiftKey){
//give some attribute that can indentify the elements of the selection
//example rel='multi-selection' or class='multi-selection'
}
});
Then you should do functions that select this elements and do whatever you need, I used this to drag multiple elements. Example if you want to delete this divs, you can for example:
function deleteMultiSelection(){
$('html').find('div[rel=multi-selection']).each(function(){
$(this).remove();
})
}
$("#button").click(function(){
deleteMultiSelection();
})
Be careful because I didn't test this code.

I have a jQuery plugin that does exactly what you want it is called finderSelect it enables Shift+Click, Ctrl+Click, Ctrl+Click+Drag and Standard Clicking on any element.

It sounds like jQuery UI Selectable is what you're after, you can try it out here.
To stay with OS conventions, they key it uses is Ctrl and not Shift, this isn't an option you can change without changing the jQuery UI code itself. It also has the feature of click and drag over elements to get a rectangular selection as well...if that's of any use.

Sure, if you are willing to do some work :)
Listen for the shift keydown, set a var that you can access from within your click handler functions, if the var is set then add that item, (or their tabindex for your current implementation) to your list of items to operate on when an 'action button' is pressed.
unset the var when you get the shift keyup event.

To be honest, the Ctrl + left click for selecting multiple items is pretty standard UI behaviour and built-in to the jQueryUI Selectable. Did you also know you can left click and drag a focus over multiple items to select them?
However, I can see an advantage in offering the behaviour in question, so how about using left click or drag to select and then left click and drag to also de-select?
It may not be the most efficient way of doing it, but after playing around with the in-built callbacks, I've come up with something that seems to work. Based on the code in your question I've hooked into the in-built callback functions to store what was selected and also handle the selection removal. JavaScript duplicated below but

updating value in html table via javascript

Hi is there any way to upadte cell value with no events (i dont want to use 'onClick' or others)?
The scheme is: user is filling form value, then clicks 'ok', and then value should be showed in cell in html table ?
thx in advance for all help

Well, you can use a link with href="javascript:myFunction()" instead of an onclick, but I'm not sure if that counts as an event :)

No, you need to hook up on an even to trigger it.

Since the user is going to click the Ok link anyways that seems to be the most relevant place to invoke your javascript from.
Create a div with an id around the content you would like to change.
Create a javascript function that sets the innerHTML of the above div.
Call the javascript function when the user hits the Ok link.