Tag Archives: forms

HTML5 contenteditable Backspace Bug Fix

When editing text in HTML5’s contenteditable attribute you probably need to have all of your content wrapped with <p> or <div> tags like so.

<p>My text</p>
<p>Another line of text</p>

The problem is if you do the following it will screw up your block formatting and dump in empty lines of text. Which is nasty formatting you don’t want and the cursor placement will start wacking out in your contenteditable area.

Continue reading HTML5 contenteditable Backspace Bug Fix

HTML5 Form Validation Fallback (without a library)

Currently HTML5 form validation doesn’t work in every modern browser. Chrome, Firefox, and IE all have beautiful error reporting, but we can’t say the same about Safari or iOS.┬áMac’s webkit based browsers display no error messages, nor do they prevent submissions when the form is invalid (see screenshot). The oddest part is Safari actually supports HTML5 form validation almost completely. In order to get things working we’ll teach you how to write an HTML5 form validation fallback that relies on CSS and a snippet of JavaScript.

html5-form-validation-fallback
Current state of HTML5 form validation out of the box. Everything works except Safari’s Webkit based browsers. Which is a huge deal since it leaves out iPhones and iPads. To view a demo of the fallback you’ll create click here

Continue reading HTML5 Form Validation Fallback (without a library)