Cross Browser Compatibility Issues With Form Input Types

Image for post
Image for post

Forms have been an integral part of the HTML ever since its foundation, allowing websites to seamlessly interact with users to collect data. HTML 4 originally had only 8 input types which imposed a huge restriction on developers and capabilities of web forms. However, with the roll out of HTML5 in 2014 and web forms 2.0, 13 new form input types were introduced that supercharged HTML Forms.

The new input types not only introduced specific data fields like telephone, email, url, date, number, etc but also added visual interactive widgets like datepickers, colorpickers, sliders, etc to enhance user experience to a completely new tangent.

As good as these newly introduced form input types were looking, they posed a plethora of cross browser compatibility and consistency issues which in some cases could dampen user experience or lead to faulty form submissions.

Today, we are going to look at some to major cross browser compatibility issues with form input types and how to resolve them using javascript/jquery plugins and polyfills so that they work perfectly even in legacy browsers like IE

LambdaTest — A Cross Browser Testing Tool

With LambdaTest, you can test over 2000+ browsers, and OS combinations hosted by Virtual Machines running through their cloud servers. I will be demonstrating real time testing feature of LambdaTest below, using which we can interact with our web page inside the VM hosted by LambdaTest and ensure whether the fix is working as intended or not.

1. Cross Browser Compatibility Issue With Form Input Type — Date/time

  • date
  • month
  • week
  • time
  • datetime-local

These 5 form input types are used to create input fields that enables a user to select not only a single date, but also a week, month, time, or completely different time zones using a dedicated date/time picker widget interface which varies with different browsers.

NOTE: The HTML < input type= “datetime” > has been deprecated and is no longer supported by browsers. This input time allowed users to pick date, time and time zone. However, it has been replaced by a new input time “datetime-local”.

Syntax

<input type=”date” name=”user_date” >
<input type=”week” name=”user_week”>
<input type=”month” name=”user_month”>
<input type=”time” name=”user_time”>
<input type=”datetime-local” name=”user_dateTime”>

These input types can be further enhanced by using attributes like min, max, value and step.

<input type=”date” id=”start” name=”startDate “ value=”2019–01–01" min=”1900–01–01" max=”2099–01–01">
  • max : highest value of acceptable date
  • min : lowest value of acceptable date
  • readonly : If the input’s contents are read-only
  • step : stepping interval when clicking up and down spinner buttons
Image for post
Image for post
Form input type — ‘Date’ rendered by different browsers

Browser Support

Image for post
Image for post

Out of all the new HTML5 form features, date-time input types have one of the poorest browser support. As you can see in the above Can I Use screenshot, the 5 Date and Time input types are not supported by any Internet Explorer version, neither by Safari nor by Opera mini. Also, until v57, Firefox also did not support date/time input. In unsupported browsers, < input type”date” >(or time,week,month, or datetime-local) degrades gracefully to a simple text box < input type=”text” >.

Image for post
Image for post
Form Input Type — “Date” is not supported in Safari 12
Image for post
Image for post
Form Input Type -“Date” is not supported in Internet Explorer 11

Did you notice the cross browser compatibility issue with form input type between Safari 12 & IE 11?

That was just a single instance. What happens if you want to test a static website or if you wish to capture screenshots of the display of your webpage in bulk?

Well, we can make use of the Screenshot Testing feature provided by LambdaTest. The automated bulk screenshot capture would allow you to test your website across 25 browsers + OS configurations in one go.

I have performed a test specific to date and time support input. Click here to see the output. Did you notice how easy it was to perform cross browser compatibility testing using the automated screenshot feature of LambdaTest?

You would also find the below tutorial video to be of great use. This video will demonstrate cross browser compatibility issues with form input types related to HTML date property.

Fixing Cross Browser Compatibility Issue — jQuery UI

Image for post
Image for post
jQuery UI library

Head over to jQuery UI website to download necessary files. Add jquery-ui.min.css, jquery-ui.min.js, and jquery files to your project. You can also additionally use a theme like UI-lightness.

<head>
<title>Form Input type Date | jQuery UI</title>
<link rel=”stylesheet” href=”/jquery-ui.min.css”>
<link rel=”stylesheet” href=”https://code.jquery.com/ui/1.12.1/themes/ui-lightness/jquery-ui.css">
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src=”jquery-ui.min.js”></script>
<script>
$(function(){
// Find any date inputs and override their functionality
$(‘input[type=”date”]’).datepicker({ dateFormat: ‘yy-mm-dd’});
});
</script>
</head>
<body>
<h1>Form input Type : Date</h1>
<input type=”date” id=”user-date” name=”user-date” value=”2018–07–22" min=”2019–01–01" max=”2019–12–31">
</body>
Image for post
Image for post
Cross Browser Compatibility Issues With Form Input Type — ‘Date’ is fixed for Internet explorer 11 by using jQuery UI

One drawback of this code is that both native date picker of browser(like chrome or firefox) and jQuery UI will be in effect and overlap. We need to ensure that, if a browser supports input type date, then do not trigger jQuery UI date picker.

We can ensure this in 2 ways –

  1. Using vanilla javascript to trigger jQuery UI date picker only in unsupported browsers. As we discussed earlier, in this case < input type=”date” > is gracefully degraded to < input type=”text” >. As shown in the code below, datepicker is conditionally applied if variable “Elem” returns input type — text.
<script>
(function() {
var elem = document.createElement(‘input’);
elem.setAttribute(‘type’, ‘date’);

if ( elem.type === ‘text’ ) {
$(‘input[type=”date”]’).datepicker({ dateFormat: ‘yy-mm-dd’});
}
})();
</script>

2. Using Modernizr Javascript library to run feature detection test for form input type date and conditionally loading jQuery Ui datepicker for unsupported browser. If you are new to modernize then you can follow my other blog where I have demonstrated feature detection with Modernizr for cross browser compatibility. Download modernizr.js development build from the official website.

<script>
$(function(){
if(!Modernizr.inputtypes.date) { /* Browsers that fail in modernizr detection test for date input type */
$(‘input[type=”date”]’).datepicker({ dateFormat: ‘yy-mm-dd’});
}
});
</script>

2. Cross Browser Compatibility Issue With Form Input Type — Color

Syntax

< input type=”color” name=”user-color” value=”#ff0000" >
Image for post
Image for post
Form Input Type — ‘Color’ rendered by different browsers

Browser Support

Image for post
Image for post
Form Input Type — “Color” is not supported in Internet Explorer 11

Fixing Cross Browser Compatibility Issue — Spectrum jquery plugin

Image for post
Image for post
Spectrum colorpicker jQuery plugin

Visit Spectrum Github repository and download spectrum.css and spectrum.js files. Spectrum color picker can be further customized as shown in the code below.

<head>
<title> Form Input type Date | jQuery UI </title>
<link rel=”stylesheet” href=”/spectrum.css”>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src=”/spectrum.js”></script>
</head>
<body>
<h2>Basic Usage</h2>
<input type=’text’ id=”basic” />
<script>
$(“#basic”).spectrum({
color: “#f00”,
change: function (color) {
$(“#basic-log”).text(“change called: “ + color.toHexString());
}
});
</script>

</body>
Image for post
Image for post
Cross Browser Compatibility Issues With Form Input Type — “Color” is fixed for Internet explorer 11 by using Spectrum plugin

Full Customisation

<body>
<h2>Basic Usage</h2>
<input type=’text’ id=”basic” />
<em id=’basic-log’></em>
<h2>Full Example</h2>
<input type=’text’ id=”full” />
<script>
$(“#basic”).spectrum({
color: “#f00”,
change: function (color) {
$(“#basic-log”).text(“change called: “ + color.toHexString());
}
});
$(“#full”).spectrum({
color: “#ECC”,
showInput: true,
className: “full-spectrum”,
showInitial: true,
showPalette: true,
showSelectionPalette: true,
maxSelectionSize: 10,
preferredFormat: “hex”,
localStorageKey: “spectrum.demo”,
move: function (color) {
},
show: function () {
},
beforeShow: function () {
},
hide: function () {
},
change: function () {
},
palette: [
[“rgb(0, 0, 0)”, “rgb(67, 67, 67)”, “rgb(102, 102, 102)”,
“rgb(204, 204, 204)”, “rgb(217, 217, 217)”, “rgb(255, 255, 255)”
],
[“rgb(152, 0, 0)”, “rgb(255, 0, 0)”, “rgb(255, 153, 0)”, “rgb(255, 255, 0)”,
“rgb(0, 255, 0)”,
“rgb(0, 255, 255)”, “rgb(74, 134, 232)”, “rgb(0, 0, 255)”, “rgb(153, 0, 255)”,
“rgb(255, 0, 255)”
],
[“rgb(230, 184, 175)”, “rgb(244, 204, 204)”, “rgb(252, 229, 205)”, “rgb(255, 242, 204)”,
“rgb(217, 234, 211)”,
“rgb(208, 224, 227)”, “rgb(201, 218, 248)”, “rgb(207, 226, 243)”, “rgb(217, 210, 233)”,
“rgb(234, 209, 220)”,
“rgb(221, 126, 107)”, “rgb(234, 153, 153)”, “rgb(249, 203, 156)”, “rgb(255, 229, 153)”,
“rgb(182, 215, 168)”,
“rgb(162, 196, 201)”, “rgb(164, 194, 244)”, “rgb(159, 197, 232)”, “rgb(180, 167, 214)”,
“rgb(213, 166, 189)”,
“rgb(204, 65, 37)”, “rgb(224, 102, 102)”, “rgb(246, 178, 107)”, “rgb(255, 217, 102)”,
“rgb(147, 196, 125)”,
“rgb(118, 165, 175)”, “rgb(109, 158, 235)”, “rgb(111, 168, 220)”, “rgb(142, 124, 195)”,
“rgb(194, 123, 160)”,
“rgb(166, 28, 0)”, “rgb(204, 0, 0)”, “rgb(230, 145, 56)”, “rgb(241, 194, 50)”,
“rgb(106, 168, 79)”,
“rgb(69, 129, 142)”, “rgb(60, 120, 216)”, “rgb(61, 133, 198)”, “rgb(103, 78, 167)”,
“rgb(166, 77, 121)”,
“rgb(91, 15, 0)”, “rgb(102, 0, 0)”, “rgb(120, 63, 4)”, “rgb(127, 96, 0)”,
“rgb(39, 78, 19)”,
“rgb(12, 52, 61)”, “rgb(28, 69, 135)”, “rgb(7, 55, 99)”, “rgb(32, 18, 77)”,
“rgb(76, 17, 48)”
]
]
});
</script>
</body>
Image for post
Image for post
Spectrum colorpicker plugin Full Customisation

3. Cross Browser Compatibility Issue With Form Input Type — Range

Syntax

< input type=”range” name=”points” min=”0" max=”10" >

Range input type can be further enhanced by using attributes like min, max, value, and step.

< input type=”range” name=”points” min=”0" max=”100" value=”50" step=”10" >
  • max: The highest value in the range slider
  • min: lowest value in the range slider
  • step: stepping interval by which slider moves
Image for post
Image for post
Form Input Type — ‘Range’ rendered by different browsers

Browser Support

Image for post
Image for post

Unlike date and color form input types, range enjoys a much wider cross browser compatibility. Internet Explorer 10–11 as well as all versions of Safari browser for Mac and iOS support range input type. An only noticeable exception is Internet Explorer 9.

Image for post
Image for post
Form Input Type — “Range” is not supported in Internet Explorer 9

Fixing Cross Browser Compatibility Issue — rangeslider.js polyfill

Image for post
Image for post
rangeslider.js polyfil

Visit rangeslider.js Github repository and download rangeslider.min.css and rangeslider.min.js files or simply use CDN links as shown below –

<head>
<title>Form Input Type Range | Rangeslier.js</title>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/1.2.1/rangeslider.min.css">
</head>
<body>
<h1>Form Input Type : Range</h1>
<input id=”range-control” type=”range” min=”0" max=”100" step=”1" value=”0">
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/1.2.1/rangeslider.min.js"></script>
<script>
$(“#range-control”).rangeslider({
polyfill: false,
onSlideEnd: function (position, value) {
console.log(‘Position’, position, ‘Value’, value);
}
});
</script>
</body>
Image for post
Image for post
Cross Browser Compatibility Issues With Form Input Type — “Range” is fixed for Internet Explorer 9 by using range slider.js

4. Cross Browser Compatibility Issues With Form Input Type — Number

Syntax

<input type=”number” name=”quantity” min=”1" max=”10">

Number input type can be further enhanced by using attributes like min, max, placeholder, step, and read-only.

<input type=”number” name=”points” min=”0" max=”10" placeholder=”5 step=”1">
  • max: the highest numeric value acceptable
  • min: the lowest numeric value acceptable
  • Placeholder: display the default numeric value in the field
  • step : step control(up/down arrows) which increments or decrements the numeric value
Image for post
Image for post
Form input type — ‘Numer’ rendered by different browsers

Browser Support

Image for post
Image for post

Just like input type range, number along with other input types such as email, tel, URL are cross browser compatible features supported by IE 10–11 as well as safari. IE9 is the only major exception.

Image for post
Image for post
Form Input Type — “Number” is not supported in Internet Explorer 9

Fixing Cross Browser Compatibility Issue — Number Polyfill

<head>
<title> Form Input Type Number | Number Polyfill </title>
<link rel=”stylesheet” href=”/inputnumber.css”>
</head>
<body>
<h1>Form Input Type : Number</h1>
<input type=”number” class=”modify-me” />
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src=”jquery.inputnumber.min.js”></script>
<script>
$().ready(function () {
$(‘.modify-me’).inputNumber();
});
</script>
</body>
Image for post
Image for post
Cross Browser Compatibility Issues With Form Input Type — “Number” is fixed for Internet Explorer 9 by using Number Polyfill

Conclusion

Originally published at LambdaTest

Author Nikhil

Image for post
Image for post

Written by

Product Growth at @lambdatesting (www.lambdatest.com)

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store