1. Forum
  2. The Garage
  3. Google docs: dispatching a keypress "Enter" (to set fontsize)
Enora Author

Hi!

I am able to change the font color with a keyboard on a google docs but now I would like to change the size of a selected text with a keyboard shortcut.

I am able to select the input field, to send the new value (6) but I am not able to submit this value.

Here is the DOM of the fontsize div:

<div id="fontSizeSelect" class="goog-toolbar-combo-button goog-inline-block goog-toolbar-combo-button-open" role="listbox" aria-disabled="false" aria-expanded="true" aria-haspopup="true" style="user-select: none;" aria-hidden="false" aria-activedescendant=":19"
 aria-owns=":2t">
    <div class="goog-toolbar-combo-button-outer-box goog-inline-block" style="user-select: none;">
        <div class="goog-toolbar-combo-button-inner-box goog-inline-block" style="user-select: none;">
            <div class="goog-inline-block goog-toolbar-combo-button-caption" id=":19" role="option" aria-setsize="14" aria-posinset="3" style="user-select: none;"><input class="goog-toolbar-combo-button-input jfk-textinput" autocomplete="off" type="text" role="combobox" aria-autocomplete="both" tabindex="-1" aria-label="Font size" style="user-select: none;" aria-owns=":mi">
            </div>
            <div class="goog-toolbar-combo-button-dropdown goog-inline-block " style="user-select: none;">&nbsp;
            </div>
        </div>
    </div>
</div>

Here is my script:

// ==UserScript==
// @name         Google docs
// @include      https://*docs.google.*/document/*
// @require    http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js
// ==/UserScript==

// listen for key shorcuts on the text part of google gocs
var editingIFrame = $('iframe.docs-texteventtarget-iframe')[0];
if (editingIFrame) {
    editingIFrame.contentDocument.addEventListener("keydown", dispatchkeyboard, false);
}


// match the key with the action
function dispatchkeyboard(key) {    
    if (key.altKey  &&  key.code === "KeyJ") {

        var divfont = document.getElementById("fontSizeSelect");
        console.log(divfont);
        var inputt = divfont.getElementsByTagName('input')[0];
        inputt.select();
        inputt.value = "6";

        var ev = document.createEvent('Event');
        ev.initEvent('keypress');
        ev.which = ev.keyCode = 13;
        console.log(ev);
        inputt.dispatchEvent(ev);

    }
}// end of  dispatchkey