jQuery Tutorial - 22 - Attribute selectors Video Lecture | Importance of jQuery in Website Development - IT & Software

ok so now we're going to create a event
handler on the end of this and this is
focus so we go ahead and create a
function inside of here and then we pull
that down so this essentially means that
we are selecting these input fields
adding this attribute and then once this
field here or the input type with email
is selected or is in focus we want to do
something so again this is only applying
to all email fields so whenever an email
field is in focus we want to do this so
let's go ahead and write out what we
want this to do the first thing we want
to do is we want to check if the value
is equal to the email default value and
if so get rid of the contents of it for
example if we were to go ahead and type
let's just we were to go ahead and click
this we want to actually get rid of all
the contents unless there is any other
content other than this original message
in there so let's go ahead and do that
now I'm going to create an if statement
and the condition is again another
selector is selecting this which only
applies to the current email field so
for example if you had two different
email fields on the page this would only
select the current one that's in focus
so we want to say this if this dot Val
is equal to email default so if it
equals the original text as we click in
ie enter your email address then we want
to wipe it we want to wipe the contents
so what we do is we say this dot
attribute and again we choose the value
attribute but this time you set this to
nothing so now what's going to happen is
when we click it it disappears but it
only disappears if it's the original
content for example if I was to go ahead
and down type in Alex at PHP academy'
org and navigate away and click back in
it doesn't remove it if we hadn't of
included this functionality here let's
just go and get rid of that
go and get rid of
this here and get rid of this here
what's going to happen is now when we
click in yes it disappears but when we
go ahead and type in a email address and
navigate away then navigate back in it
re wipes it in the field so we use this
if statement to determine the count
value matching the default value and
therefore that's the only time we need
to actually wipe it I'm going to go
ahead and just down here append on
another event handler and this is blur
ie when the user moves away from the
field so when a blur are cut occurs we
want to handle or call back another
function and this time we want to check
it for nothing now the only time we want
to re put this text back into the field
you'll notice that at the moment when we
click in click out we don't get this
original value back in so we need it's
been left as blank but what we want to
happen is if we say type something in
then delete it and then navigate back
away from it we want the default text to
be placed back in so again we need
another if statement and obviously our
block there now the condition this time
is the same as the other one this dot
vowel but this time is if it's equal to
zero it's equal to nothing then we want
to carry out an action so when we
navigate away from this field by the
clicking away or tabbing away from a
field to another field or another
element on the page we check if this
value is equal to nothing and if the
value is equal to nothing we want to go
ahead and set the attribute value to
back to the email default so again this
dot attribute much like we did here but
this time instead of removing it we want
to put it back to the original value so
value and this is email default so again
if it's empty we're just changing the
value of this to the you know default so
let's refresh and let's click in and
click away again you automatically
notice that what we've done has taken it
been taken into effect we click in and
we click away now when I click in and
type something
and navigate away nothing happens
because it's not eat the value of this
is not equal to nothing when I click
back in you'll notice that the nothing
disappears because we've already checked
this up here if the value is is the
email default value then blank the field
is not the default value so it doesn't
blank and therefore we keep this email
address in here so that's the input type
selector you'll notice that if I was to
go ahead and duplicate this email field
so if I was to go ahead and duplicate
this again so for example confirm email
and we'll just change the well the type
still email what's going to happen is is
we have the same functionality for both
fields now we have the same
functionality for this one as we do for
this one so we can go ahead and type in
Alex PHP academy' de org navigate away
nothing happens we can come in here
again another gate away or we can go
Alex PHP academy' org navigate away and
we've got two email addresses with the
message original message obviously
disappeared and we're just left with
these so using our L attribute selector
like I said at the start of the tutorial
we can use this for absolutely any
element that supports this but for now
I've just decided to create something
that was a bit more applicable to real
life as opposed to just talking about
you know different elements we can
select and I think this is a really good
example of how to do this and also
notice that we've used absolutely no
code javascript code in
main file we've used jQuery to handle
all of this so we've eliminated the need
for any JavaScript to be mixed in
without HTML and like I said this is
cross-compatible now so wherever you
include selectors jeaious and jquery is
this functionality will be available