How to Close the Mobile Keyboard on Return in JavaScript

A nice feature that appears on some sites is the ability to have realtime search results. You have a search input that as you type the results update dynamically below without the need tho hit return/enter. However, if to achieve this the form's default behaviour to submit is disabled, on mobile and tablet the onscreen keyboard won't close on return. This can be confusing to the end-user.

To get round this we can listen for the return key being pressed and removing the focus on the input field using the blur event.

Scoping JavaScript Functionality to Specific Pages with Laravel and CakePHP

I regularly work on medium to large scale websites using both Laravel and CakePHP. A common part of the development process is building in some additional JavaScript functionality to improve the user experience. This can often be functionality that is only relevant to specific pages. For a example, on an ecommerce site the checkout process may consist of several steps each with functionality unique to that page; the basket step may need the ability to update quantities and totals whilst the payment screen may need to toggle fields depending on the card type.

Disable Multiple Form Submits with Vanilla JavaScript

Earlier this week I was helping a colleague write some vanilla JavaScript to prevent a form from being submitted multiple times by an overzealous button clicker. The solution needed to be some framework-free JavaScript code. Thankfully this is pretty simple to do, so I thought I’d share some of the options here.

Using TinyMCE's pagebreak Plugin with valid_elements

TinyMCE’s pagebreak plugin is a handy way of providing users a way of marking breaks in content by placing a HTML comment in the source code denoting the break. However, if you are using the editor’s valid_elements attribute to restrict HTML elements used in the content (a good idea if you don’t want all sorts of messy markup getting added) you need to make sure you allow comment tags.

How to Remove the Link Target Options from TinyMCE

If you’re using the link plugin for TinyMCE to add links to content and want to get rid of the target attribute options then the trick is to set target_list to false in the editor’s configuration.