Why is This Snippet not Replacing the Original Value in the Input Field?

JavaScript
1

Hello all,

Why doesn’t the below snippet replace the input value if the value is set to empty?


      function input_reset(obj){
        if (obj.length == 0){
          obj.value = obj.defaultValue;
        }
      }

I have a form element:


<input type="text" name="email" id="go" value="your e-mail" onclick="input_focus(this)" onblur="input_reset(this)" maxlength="60"/>

I haven’t done something right, apparently. :unhappy:

2

Good morning,

Because you are passing the function this as an argument.
this refers to the input element, so if you do console.log(obj); from within the function, you will see:

<input type="text" name="email" id="go" value="your e-mail" onclick="input_focus(this)" onblur="input_reset(this)" maxlength="60">

You are then checking if the length of the input element is zero, which it never will be.

What you need to do instead, is to check if the length of the input element’s value attribute is zero.
Change your code to this:

function input_reset(obj){
  if (obj.value.length == 0){
    obj.value = obj.defaultValue;
  }
}

You might also want to consider getting rid of the inline event handlers, as this mixes behaviour and content.
I can show you how if you would like.

3

I’d like to learn the best techniques. Maybe you can just link me a read, and I can learn it myself.

4

I forgot, you’re using jQuery.
In that case it gets even easier.

Remove the inline JS:

<input type="text" name="email" id="go" value="your e-mail" maxlength="60">

Then in your JS get a reference to the field by id (for example) and attach the necessary handlers:

$("#go").focus(function(){
  console.log("focus");
});

$("#go").blur(function(){
  console.log("blur");
});

You can also do it in one go using on:

$("#go").on('focus blur', function(e) {
  if (e.type == "focus"){
    console.log("focus");
  } else {
    console.log("blur");
  }
});

In this example we are passing in an event object and examining its type to determine what action to take.

There is no difference between the two methods in this context.
However, .on() has replaced .live() in jQuery 1.9 and can also be used to attach behaviour to dynamically created events.

Also, you might find these useful:

http://jqfundamentals.com/chapter/events

5

Thank you very much! I’ll work out your reply when I get home to try it out.

Consider this thread closed.

6

Did you mean to post this to this thread? You didn’t start this thread, nor post to it prior to this post… :shifty:

7

Cool! :jester: This works perfectly.

8

Wait, but when I tried the reset and focus functions to remove and replace the default value, I don’t know how I’ll target it without the obj parameter that was originally being used. Do I just make it like this:


	  $("#go").focus(function(){
		if ($("#go").val() == $("#go").prop('defaultValue')){
			$("#go").val('');
		}
	  });
 
	  $("#go").blur(function(){
		if ($("#go").val() == ''){
 		 $("#go").val('defaultValue');
		}
  	  });

It works just fine on the focus function, but if it’s empty on blur, ‘defaultValue’ is inserted as a result of the reset function.

9

Hi etidd,

within the event handler $(this) refers to the HTML element that triggered the event.

I would write:

$("#go").on('focus blur', function(e) {
  var v = $(this).val()
  if (e.type == "focus"){
    v = (v == "your e-mail")? "" : v;
  } else {
    v = (v == "")? "your e-mail" : v;
  }
  $(this).val(v);
});

This uses a ternary operator to assign the value of v.

10

Cool! Thanks, Dave. :weyes: