Solving Cross Browser Issues - Part 3 (Mootools and HTML5)

February 23, 2012 by JavaScript   Cross Browser  

Browser Chairs

In the previous two parts, I had a look at GWT, JQuery and Dart as possible solutions for solving cross-browser issues.

In this post I am going to have a look at Mootools using the same criteria as in the previous posts and have a look at a HTML5 solution.


Note that when I created the main snippet for this post I made use of Mootools version 1.3.2 and was forced to manually add the paste event required by my criteria (you know the event thats not supported by Opera but by everyone else).

// Required by older Mootools versions

Object.append(Element.NativeEvents, {
  'paste': 2

Element.Events.paste = {
  base : 'paste',
  condition: function(e) {
	// More of an afterpaste event
	this.fireEvent('paste', e, 1);
    return false;

This all changed however with the latest version (currently 1.4.4) in which you can exclude the preceding snippet - which obviously means that the paste event is now included by default.

In the following snippet you can see the Mootools version of the criteria:

window.addEvent('domready', function() {
		var maxlength = sender.get('maxlength');
		if (maxlength != null)
			sender.addEvent('keypress', function(e){
				if ((e.code == 8) || (e.code > 36) && (e.code < 41)) return true;				
					return sender.value.length < maxlength;

			sender.addEvent('paste', function()
					if(sender.value.length > maxlength)
						sender.value = sender.value.substring(0, maxlength);}, 1);

Looking at the snippet above you'll probably notice a few similarities to JQuery; the two technologies do infact overlap in quite a number of ways. There is nonetheless a few fundamental difference between them but I am not going to go into too much detail, read about it over here.

Like previously mentioned I initially used an older version of Mootools which gave me a different take on the technology. I felt a bit irritated about having to do something dicey in order to attach something as simple as a paste event, the exact same thing I had to do when using the GWT.

I did however start to see wisdom in an approach of excluding cross-browser unsupported functionality in a framework like Mootools (not sure if this is really one of their aims seeing that the newer version now supports the excluded event).

A framework can provide us with a way to establish boundaries, the premise being that if we play within these boundaries we'll likely be safe. We can of course still allow developers to play outside these boundaries but at their own risk of writing code thats NOT going to be cross-browser friendly (sounds like GWT/JSNI scenario).

I don't believe that the creators of Mootools & JQuery set out to create any real boundaries as such (someone correct me if I am wrong).

It would of course be very difficult to create real boundaries seeing as nothing stops the developer from accessing the raw DOM (even by accident) and using something cross-browser unfriendly.

If you were using something like GWT its a completely different matter, since you don't have real access to the raw DOM (minus using the JSNI, but thats not something you'll use by accident)


There is currently a lot of buzz in the air about HTML5 which boasts features like:
  • Offline storage.
  • Canvas library.
  • Audio/Video support.
  • New inline elements (e.g. mark, time, meter, progress)
  • New form types (datetime, date, month, week, time, number, range, email, url)

How will this affect cross-browser issues? Well, some suggests that HTML5 will greatly improve the situation. I am personally not too conviced, especially if we look at how shady current implementations are.

Incidently the aim of the criteria used in this series of posts is to add support for something thats actually part of the HTML5 specification, but currently only implemented by 3/5 browsers - we're already busy creating workarounds.

I do nevertheless believe in HTML5 and see it as a step in the right direction.

Also in all fairness I managed to find a HTML5 solution to fully implement the criteria in 5/5 browsers, observe the following Mootools snippet.

window.addEvent('domready', function() {
		var maxlength = sender.get('maxlength');
		if (maxlength != null)
			sender.addEvent('input', function()
				if(sender.value.length > maxlength)
					sender.value = sender.value.substring(0, maxlength);

Instead of attaching handlers to the keypress & paste event, I've only attached a handler to the input event (one of the many new events available in HTML5).

I will have a deeper look into HTML5 is future posts.

In the next part I am going to have a look at Yahoo's YUI library.

Leave a Comment

August 3, 2012 by Christoff Truter

Hi Javier Thanks for the feedback, I am mainly using this script for demo purposes (most browsers support HTML5 with the maxlength attribute for textareas already - or will soon, so there is no point in using this script) But it should be fairly easy to alter this script to work more "naturally"

August 3, 2012 by Javier

Good script, but it has one fail. Imagine you have a textarea with maxlength=10 and it has 10 characters; thus, you cannot write any more char. Then, select all the text inside the textarea and try to write anything. The expected behaviour is the text deleted and the new one written, but this script prevents from this.

    Related Posts

    Solving Cross Browser Issues - Part 2 (GWT and Dart)

    February 7, 2012

    Solving Cross Browser Issues - Part 1 (JQuery and GWT)

    January 9, 2012

    Latest Posts

    Strongly Typed PHP - Revisited

    May 22, 2016

    MVC (Model-View-Controller)

    May 17, 2016

    HP Recovery partitions, transfer from HDD to SSD

    May 16, 2016

    Dependency Injection using Ninject and PostSharp

    April 26, 2016

    Aspect Orientated Programming (AOP) - A Brief look at PostSharp

    April 15, 2016

    How to become a better programmer.

    April 5, 2016

    JavaScript Fundamentals - Hoisting

    March 22, 2016

    Quick and dirty look at ECMAScript 6

    March 17, 2016

    JavaScript Promises

    March 9, 2016

    CSS Combinators

    March 7, 2016

    Most Commented on Posts

    Moving items between listboxes in example

    Move items between two listboxes in, VB.NET) and PHP
    June 12, 2008

    Simple WYSIWYG Editor

    Creating a WYSIWYG textbox for your website is actually quite simple.
    February 1, 2007

    C# YouTube : Google API

    Post on how to integrate with YouTube using the Google Data API
    March 12, 2011

    Populate a TreeView Control C#

    Populate a TreeView control in a windows application.
    August 27, 2009

    ASP.NET(C#) : Autocomplete TextBox - Part 1 (From Scratch)

    Part one of how to create an autocomplete textbox using ASP.NET(C#)
    March 27, 2011

    Angular   Architecture   ASP.NET   Astronomy   Breaking News   C#   C++   Coding Horrors   Comedy   Cross Browser   CSS   Design Patterns   ES6   Google API   IIS   Integration   JavaScript   Jquery Mobile   Love and War   Microsoft Office   Model View Controller   Ninject   Personal   PHP   PostSharp   SEO   South Africa   SQL   Threading   TypeScript   Visual Basic   XML