¡ Creates
a
slider
with
a
thumb
button
¡ Use
cases:
§ Setting
a
value
from
a
range
(ex:
max
price)
§ Setting
the
position
of
something
Slide 5
Slide 5 text
¡ min
=
¡ max
=
¡ step
=
¡ value
=
Slide 6
Slide 6 text
// range with default value
// range within defined boundaries
// step of the input’s increment value
Slide 7
Slide 7 text
¡ No
native
support
for
“multiple
thumbs”
§ Use
case:
filtering
within
a
range
of
prices
(min/max)
¡ Solution:
use
JS
widgets
§ jQuery
UI
Slider:
▪ http://jqueryui.com/demos/slider/#range
Slide 8
Slide 8 text
¡ Accepts
valid
numbers
¡ Creates
an
input
box
with
a
up/down
ticker
Slide 9
Slide 9 text
// default value
// accept numbers within boundaries
// step of the input’s up/down buttons
Slide 10
Slide 10 text
// step of the input’s up/down buttons
// negative to positive range
Slide 11
Slide 11 text
¡ Creates
an
input
box
with
a
“search”
icon
and
a
reset
button.
¡ Has
a
“history”
option
Slide 12
Slide 12 text
Slide 13
Slide 13 text
¡ Accepts
valid
dates
¡ Shows
native
date-‐picker
in
some
implementations
(iOS,
Android,
Opera)
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
// default value
// select between a range of dates
¡ New
input
types
§ Range
§ Number
§ Search
§ Date
§ URL
§ Email
¡ Rely
on
the
browser
for
usability
¡ Upcoming:
Rely
on
the
browser
for
validation
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
¡ Temporary
informative
value
for
an
input
¡ Common
in
search
boxes:
§ “Search
for
…”
§ “Type
your
question
here
…
”
Slide 21
Slide 21 text
// using a placeholder value
Slide 22
Slide 22 text
¡ Use
the
browser’s
local
form
history
§ Indexed
search
by
the
input
name:
▪ email
▪ first_name
▪ url
▪ …
Slide 23
Slide 23 text
¡ When
possible,
use
popular
input
names
§ Helps
the
user
fill
forms
faster
¡ autocomplete=“off”
prevents
this
behavior
Slide 24
Slide 24 text
// autocomplete when typing
using the browser’s history for inputs
with name = “email”
Slide 25
Slide 25 text
¡ Focus
the
user
input
on
page
load
§ Lets
the
user
quickly
start
typing
§ Think
Google
homepage
Slide 26
Slide 26 text
¡ Mark
an
input
as
required
to
be
filled
¡ The
browser
will
prevent
form
submit
if
the
input
isn’t
filled
¡ Bonus:
in-‐browser
validation
Slide 27
Slide 27 text
// make an input required
Slide 28
Slide 28 text
// make an input required
var input =
document.querySelector(‘input[name=“user”]’);
// custom invalid message
input.setCustomValidity(“What’s your name?");
Slide 29
Slide 29 text
Google
Chrome
default
Custom
Slide 30
Slide 30 text
¡ Regular
Expression
to
validate
the
input
value
§ Phone
number
§ Zip
code
§ URL
§ …
¡ The
browser
will
prevent
form
submit
if
the
input
value
does
not
match
Slide 31
Slide 31 text
// make the browser validate against a regex
pattern
Slide 32
Slide 32 text
¡ Prevents
user
input
¡ Input
renders
grayed-‐out
Slide 33
Slide 33 text
// prevent the user from changing the value
Slide 34
Slide 34 text
¡ Prevents
user
input
¡ Difference
from
“disabled”
§ Readonly
input
values
are
sent
on
form
submit
§ Disabled
input
values
are
not
sent
Slide 35
Slide 35 text
// prevent the user from changing the value
// sends the value on form submit
Slide 36
Slide 36 text
¡ Rely
on
the
browser
for
usability
§ placeholder
§ autocomplete
§ autofocus
§ required
§ pattern
§ disabled
§ readonly
Slide 37
Slide 37 text
¡ The
browser
can
validate
client-‐side
¡ Give
the
browser
hints
to
§ what
is
required
§ what
is
valid
§ what
is
enabled
/
disabled
¡ Input
types
help
with
validation
§ date,
number,
email,
etc…
// Listening for events
el.addEventListener(“click”, handler, false);
function handler(e){
// “e” is the MouseEvent object
}
Slide 41
Slide 41 text
¡ Triggered
when
you
submit
a
form
§ Pressing
the
submit
button
§ Pressing
the
“Enter”
key
in
a
focused
input
¡ Reloads
the
page
Slide 42
Slide 42 text
¡ event.preventDefault()
¡ Useful
for
§ Validation
§ Submit
form
with
AJAX
§ Client-‐side
processing
Slide 43
Slide 43 text
// Listening for a form submit event
form.addEventListener(“submit”, handler,
false);
function handler(e){
// prevent the form submit and page refresh
e.preventDefault();
}
Slide 44
Slide 44 text
¡ Triggered
on
an
input
when
it
is
“active”:
§ Can
type
into
a
text
field
§ Can
toggle
a
checkbox/radio
button
Slide 45
Slide 45 text
// Listening for an input focus event
input.addEventListener(“focus”, handler,
false);
function handler(e){
console.log(“Focused ” + e.target);
}
Slide 46
Slide 46 text
¡ Triggered
on
an
input
when
it
has
left
its
“active”
state:
§ Clicked
outside
it
§ Pressed
“Tab”
key
and
moved
to
another
element
Slide 47
Slide 47 text
// Listening for an input blur event
input.addEventListener(“blur”, handler,
false);
function handler(e){
console.log(“Left from ” + e.target);
}
Slide 48
Slide 48 text
¡ Triggered
on
an
input
when
its
value
changes
¡ Important:
§ On
text-‐like
inputs
it
is
triggered
only
after
the
“blur”
event
§ Listen
for
“keyup”
or
“keydown”
events
instead
Slide 49
Slide 49 text
// Listening for a range input change event
range.addEventListener(“change”, handler,
false);
function handler(e){
console.log(“Value ” + e.target.value);
}
Slide 50
Slide 50 text
// Listening for a text input change event
input.addEventListener(“keyup”, handler,
false);
function handler(e){
// e.keyCode tells you the key (27 = Esc)
console.log(“The key code: ” + e.keyCode);
}
Slide 51
Slide 51 text
¡ Prevent
form
submit
¡ Listen
for
input
state
changes
§ focus
§ blur
¡ Listen
for
changes
on
inputs
§ change
§ keyup
Slide 52
Slide 52 text
No content
Slide 53
Slide 53 text
¡ Spotty
support
¡ Accelerated
pace
of
browser
updates
§ Firefox,
Chrome
1
–
1.5
month
/
cycle
¡ https://wiki.mozilla.org/Releases
¡ http://www.chromium.org/developers/
calendar
¡ IE
9,
IE10
work
only
with
Windows
7
§ Windows
XP
~47%
OS
market
§ Windows
7
~
36%
http://www.netmarketshare.com/operating-‐system-‐
market-‐share.aspx?qprid=10&qpcustomd=0
Slide 57
Slide 57 text
¡ WebKit
is
becoming
the
mobile
web
platform
¡ Mobile
browsers:
§ ~75
%
WebKit-‐based
(iOS
+
Android)
§ ~
20
%
Opera
Mini
¡ Fragmentation
§ iOS
§ Android
(latest)
§ Android
(vendor
“X”)
Slide 58
Slide 58 text
¡ http://www.modernizr.com/
§ Check
feature
availability
in
the
browser
§ Use
“polyfills”
for
old
browsers
Slide 59
Slide 59 text
¡ http://www.browserscope.org
§ Distributed
testing
by
crowdsourcing
§ Every
visitor
runs
the
the
tests
in
the
background
§ Write
your
own
JS
tests
§ Graphs,
feature
support
evolution
Slide 60
Slide 60 text
¡ http://www.browserscope.org/user/tests/
table/
agt1YS1wcm9maWxlcnINCxIEVGVzdBib2KQ
GDA
¡ Up
to
date
metrics
on
feature
support
¡ Desktop
and
mobile
browser
coverage
Slide 61
Slide 61 text
I skate to where the
puck is going to be,
not where it has been.
Wayne Gretzky
http://www.flickr.com/photos/tazphotos/4400220464/
Slide 62
Slide 62 text
thanks!
Razvan
Caliman
rcaliman@adobe.com
razvan.caliman@gmail.com
now,
go
build
something
cool!