August 15, 2016

Quickly remove read-only web page form fields with a bookmarklet

Filed under: Technical — Tags: , , , — James Bunton @ 9:11 am

It’s somewhat common for some web pages to require that you enter your password by clicking buttons instead of using a regular form input field. For example the loans.com.au login screen does this.

The stated reason is usually security. However we should all be using password managers anyway, so this is quite annoying.

The bookmarklet

Find the menu item in your browser to create a new bookmark. Then set the “Location” or “URL” to the code below. Now whenever you visit a page you can select this bookmark from the menu to make all the form input fields on the page editable.

javascript:Array.from(document.getElementsByTagName("input")).forEach((el)=>el.removeAttribute("readonly"))

How it works

A bookmarklet is a small snippet of Javascript code that you can run just by selecting a bookmark from your browser’s menu. You don’t need to install any browser addons and the code can be very short. It can make any changes you like to the page, in this case I just remove the readonly attribute from all input fields on the page.

You’ll have to ‘run’ the bookmarklet every time you visit the page. If you want to automate this you could install a browser addon like Greasemonkey and adapt the script.